vue封装下拉框组件及引用代码
时间: 2023-08-28 08:05:19 浏览: 46
好的,下面是一个简单的 Vue 下拉框组件的封装及引用代码:
```vue
<template>
<div class="select-container">
<div class="select-header" @click="showOptions = !showOptions">
{{ selectedOption || placeholder }}
<i v-if="showOptions" class="fa fa-sort-up"></i>
<i v-else class="fa fa-sort-down"></i>
</div>
<div class="select-options" v-show="showOptions">
<div v-for="(option, index) in options" :key="index" @click="selectOption(option)">
{{ option }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
default: () => []
},
placeholder: {
type: String,
default: "请选择"
}
},
data() {
return {
selectedOption: "",
showOptions: false
};
},
methods: {
selectOption(option) {
this.selectedOption = option;
this.showOptions = false;
this.$emit("option-selected", option);
}
}
};
</script>
```
这个组件的使用方法如下:
```vue
<template>
<div>
<SelectBox :options="options" placeholder="请选择" @option-selected="onOptionSelected"/>
</div>
</template>
<script>
import SelectBox from "@/components/SelectBox.vue";
export default {
components: {
SelectBox
},
data() {
return {
options: ["Option1", "Option2", "Option3"]
};
},
methods: {
onOptionSelected(option) {
console.log(`Selected option: ${option}`);
}
}
};
</script>
```
在这个例子中,我们向 `SelectBox` 组件传递了一个 `options` 属性,这是一个包含下拉框选项的数组。我们还传递了一个 `placeholder` 属性,以指定下拉框未选择选项时显示的文本。`SelectBox` 组件使用 `v-for` 指令为每个选项生成一个 `div` 元素,并在用户选择一个选项时发出一个 `option-selected` 事件。