el-popover 搭配 el-input 做出类似el-select完美组件

你可以使用 `el-popover` 和 `el-input` 结合来实现一个类似 `el-select` 的完美组件。首先，你需要在 `el-input` 上添加一个点击事件，当点击输入框时触发 `el-popover` 的显示。然后，在 `el-popover` 中放置一个含有选项的列表，当选择一个选项时，将其值赋给 `el-input`。

下面是一个简单的示例代码：

<template>
  <div>
    <el-popover
      placement="bottom-start"
      v-model="popoverVisible"
      trigger="manual"
    >
      <el-select
        v-model="selectedValue"
        @change="handleSelectChange"
      >
        <el-option
          v-for="option in options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        ></el-option>
      </el-select>
    </el-popover>

    <el-input
      v-model="inputValue"
      @click="showPopover"
    ></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      popoverVisible: false,
      selectedValue: '',
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
      ],
    };
  },
  methods: {
    showPopover() {
      this.popoverVisible = true;
    },
    handleSelectChange(value) {
      this.inputValue = value;
      this.popoverVisible = false;
    },
  },
};
</script>

在上面的代码中，我们创建了一个 `el-popover` 组件，它包含一个 `el-select` 组件作为列表，并将选择的值赋给 `selectedValue`。当选择一个选项后，我们将其值赋给 `inputValue`，并隐藏 `el-popover`。

请根据你的需求进行修改和样式调整。希望这个示例对你有帮助！