vue3封装一个Select下拉选择器组件

好的，以下是一个简单的Vue3 Select组件的封装示例：

<template>
  <div class="select-wrapper" @click="toggleDropdown">
    <div class="selected-item">{{ selectedOption.label }}</div>
    <div class="dropdown" v-show="isDropdownOpen">
      <div 
        class="option" 
        v-for="option in options" 
        :key="option.value" 
        @click="selectOption(option)">
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Object,
      required: true
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const isDropdownOpen = ref(false);
    const selectedOption = ref(props.value);

    const toggleDropdown = () => {
      isDropdownOpen.value = !isDropdownOpen.value;
    };
    
    const selectOption = (option) => {
      selectedOption.value = option;
      isDropdownOpen.value = false;
      emit('update:value', option);
    };

    return {
      isDropdownOpen,
      selectedOption,
      toggleDropdown,
      selectOption
    };
  }
};
</script>

<style scoped>
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 150px;
}

.selected-item {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.option {
  padding: 8px;
  cursor: pointer;
}

.option:hover {
  background-color: #f2f2f2;
}
</style>

使用方法：

<template>
  <div>
    <Select :options="options" v-model="selectedOption" />
  </div>
</template>

<script>
import Select from './Select.vue';

export default {
  components: {
    Select
  },
  data() {
    return {
      options: [
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
        { label: 'Option 3', value: 3 },
        { label: 'Option 4', value: 4 }
      ],
      selectedOption: { label: 'Option 1', value: 1 }
    };
  }
};
</script>

注意，上述代码中使用了Vue3的Composition API，如`ref`、`setup`等，需要使用Vue3.0及以上版本。同时，由于该组件使用了`v-model`，需要在`emit`中添加`'update:value'`事件以支持双向绑定。