vue + html 编写仿element select 多选组件

好的，我可以为您提供一个简单的实现方案。首先，您需要创建一个 Vue 组件，可以命名为 MultiSelect。

MultiSelect 组件需要包含一个 input 输入框和一个下拉菜单，下拉菜单中包含多个选项，每个选项都可以被选择或取消选择。

下面是 MultiSelect 组件的基本代码：

<template>
  <div class="multi-select">
    <div class="input-container">
      <input type="text" v-model="searchKeyword" @input="filterOptions" @focus="isFocus = true" @blur="isFocus = false" placeholder="请选择">
      <i class="el-icon-arrow-down"></i>
    </div>
    <div class="options-container" v-show="isFocus">
      <ul>
        <li v-for="(option, index) in filteredOptions" :key="index" @click="toggleOption(option)">
          <span v-if="selectedOptionIndexes.indexOf(index) !== -1" class="el-tag el-tag--info">{{ option.label }}</span>
          <span v-else>{{ option.label }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MultiSelect',
  props: {
    options: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      searchKeyword: '',
      isFocus: false,
      selectedOptionIndexes: []
    }
  },
  computed: {
    filteredOptions () {
      return this.options.filter(option => option.label.includes(this.searchKeyword))
    }
  },
  methods: {
    filterOptions () {
      // 根据搜索关键词过滤选项
    },
    toggleOption (option) {
      // 切换选项的选中状态
    }
  }
}
</script>

<style scoped>
.multi-select {
  position: relative;
  display: inline-block;
  width: 200px;
}
.input-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.input-container input {
  border: none;
  outline: none;
  flex: 1;
}
.options-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  z-index: 999;
}
.options-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.options-container li {
  padding: 6px;
  cursor: pointer;
}
.options-container li:hover {
  background-color: #f5f5f5;
}
.el-tag {
  margin-right: 6px;
}
</style>

上面的代码中，props 中的 options 数组包含了所有可选项，每个选项由 label 和 value 两个属性组成。搜索关键词通过 v-model 绑定到 input 输入框中，并且通过 @input 事件实时更新过滤后的选项列表。下拉菜单的显示和隐藏通过 v-show 和 isFocus 控制。选中的选项通过 selectedOptionIndexes 数组保存，toggleOption 方法用于切换选项的选中状态。

如果您需要实现多选功能，可以在 toggleOption 方法中修改为下面的代码：

toggleOption (option) {
  const index = this.selectedOptionIndexes.indexOf(option);
  if (index !== -1) {
    this.selectedOptionIndexes.splice(index, 1);
  } else {
    this.selectedOptionIndexes.push(option);
  }
}

这样，选中的选项就可以通过 selectedOptionIndexes 数组保存，然后可以在其他组件中通过 props 或 emit 事件获取到。

希望这个简单的实现方案可以帮助到您。