vue3 手动实现一个select多选框组件

在 Vue3 中手动实现一个多选框（select）组件，你可以采用模板、数据绑定和事件处理的方式来构建。这是一个基础的示例：

<template>
  <div class="custom-select">
    <select v-model="selectedValues" multiple @change="handleChange">
      <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
    </select>
    <span>已选择：{{ selectedValues.join(', ') }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储被选中的值
      options: [
        { label: '选项一', value: 'option1' },
        { label: '选项二', value: 'option2' },
        { label: '选项三', value: 'option3' },
        // ... 更多选项
      ],
    };
  },
  methods: {
    handleChange(event) {
      this.selectedValues = event.target.options
        .filter(option => option.selected)
        .map(option => option.value);
    },
  },
};
</script>

<style scoped>
.custom-select {
  /* 样式自定义 */
}
</style>

在这个例子中，`v-model`用于双向数据绑定，当用户从下拉列表中选择或取消选择选项时，`handleChange`方法会被触发更新 `selectedValues`。每个选项都有 `label` 和 `value` 属性，用于显示文本和存储实际值。