【Vue】二次封装elementUI自定义样式的input搜索框

<template>
  <el-popover
    ref="popover"
    placement="bottom"
    width="200"
    trigger="manual"
    v-model="visible"
    popper-class="custom-search-popover"
  >
    <el-input
      slot="reference"
      :placeholder="placeholder"
      prefix-icon="el-icon-search"
      v-model="inputValue"
      @focus="handleFocus"
      @blur="handleBlur"
      @keyup.enter.native="search"
    ></el-input>
    <div class="search-action">
      <el-button type="text" @click="clear">清除</el-button>
    </div>
  </el-popover>
</template>
 
<script>
export default {
  name: 'CustomSearchInput',
  props: {
    placeholder: String,
    value: String
  },
  data() {
    return {
      inputValue: this.value,
      visible: false
    };
  },
  watch: {
    value(newVal) {
      this.inputValue = newVal;
    },
    inputValue(newVal) {
      this.$emit('input', newVal);
      if (newVal) {
        this.visible = true;
      }
    }
  },
  methods: {
    handleFocus() {
      this.visible = true;
      this.$refs.popover.doShow();
    },
    handleBlur() {
      this.$refs.popover.doClose();
    },
    search() {
      this.$emit('search', this.inputValue);
    },
    clear() {
      this.inputValue = '';
      this.$emit('input', '');
      this.handleBlur();
    }
  }
};
</script>
 
<style scoped>
.custom-search-popover {
  padding: 0;
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.search-action {
  padding: 8px;
  text-align: right;
  background-color: #fff;
}
</style>

这个代码实例展示了如何创建一个自定义的搜索框，它包含了一个可以展示自定义样式的弹出层，并且可以通过Props接收和发送数据。它还包括了一些基本的搜索操作，如清除搜索条件和触发搜索事件。这个例子可以作为创建Vue组件的参考，特别是对于需要在多个页面上重复使用搜索框的场景。