Vue+ElementUI前端添加展开收起搜索框按钮

在Vue中使用ElementUI时，可以通过el-input组件结合el-button组件来实现一个可以展开和收起的搜索框。以下是一个简单的实现示例：

<template>
  <div>
    <el-input
      :class="{'expanded': isExpanded}"
      v-model="searchQuery"
      :suffix-icon="isExpanded ? 'el-icon-close' : 'el-icon-arrow-down'"
      @suffix-click="toggleSearch"
      @click.native="toggleSearch"
    >
      <template v-slot:append>
        <el-button
          :icon="isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          @click="toggleSearch"
        />
      </template>
    </el-input>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isExpanded: false,
      searchQuery: '',
    };
  },
  methods: {
    toggleSearch() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>
 
<style scoped>
.expanded {
  width: 100%;
}
</style>

在这个示例中，我们使用了el-input的suffix-icon和suffix-click属性来添加一个关闭按钮，它会切换isExpanded状态。同时，我们使用了插槽append来添加一个按钮，它也会触发toggleSearch方法来切换搜索框的展开和收起状态。通过CSS我们可以控制在展开状态时搜索框的宽度。