vue3封装一个Select下拉选择器组件
时间: 2023-01-29 19:06:01 浏览: 106
好的,我会尽力帮助您。下面是 Vue 3 封装 Select 下拉选择器组件的一个示例:
首先,创建一个 Select.vue 组件。
在组件中,使用 Vue 3 的 Composition API 来定义 props、data 和方法。
例如,您可以定义一个名为 value 的 prop,用来储存选中的值。您也可以定义一个名为 options 的 prop,用来储存选项列表。
还可以定义一个名为 visible 的 data,用来控制选择器的可见性。
然后,在 template 中,使用 v-if 指令来控制选择器的显示/隐藏。
在 template 中,使用 v-for 指令遍历 options 列表,并为每个选项创建一个 button。
最后,在组件中定义一个名为 selectOption 的方法,用来更新 value 和 visible 的值。
组件的代码大概长这样:
```
<template>
<div>
<button v-if="!visible" @click="visible = true">
{{ value }}
</button>
<div v-if="visible">
<button v-for="option in options" @click="selectOption(option)">
{{ option.label }}
</button>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'Select',
props: {
value: {
type: String,
required: true,
},
options: {
type: Array,
required: true,
},
},
setup(props) {
const visible = ref(false)
function selectOption(option) {
visible.value = false
props.value = option.value
}
return {
visible,
selectOption,
}
},
})
</script>
```
希望这能帮到您。