uni-app 可输入select插件需求 支持添加删除选择项
uni-app 可输入select插件需求 支持添加删除选择项
描述
一个文本框,可输入,可选择,选择项可以用户自己维护,添加或删除
1 回复
在uni-app中,要实现一个可输入且支持添加和删除选择项的select插件,你可以通过自定义组件的方式来实现。以下是一个简化的代码示例,展示了如何实现这一功能。
首先,创建一个名为custom-select.vue
的组件:
<template>
<view class="custom-select">
<view class="select-input">
<input
v-model="inputValue"
@focus="showOptions = true"
@blur="handleBlur"
placeholder="请输入或选择"
/>
</view>
<view v-if="showOptions" class="options-list">
<view
v-for="(item, index) in options"
:key="index"
class="option-item"
@click="selectItem(item)"
>
{{ item }}
</view>
<view class="add-option" @click="addOption">
+ 添加选项
</view>
</view>
<view class="selected-items">
<view
v-for="(selected, index) in selectedItems"
:key="index"
class="selected-item"
>
{{ selected }}
<button @click="removeItem(index)">删除</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
showOptions: false,
options: ['选项1', '选项2'],
selectedItems: []
};
},
methods: {
selectItem(item) {
if (!this.selectedItems.includes(item)) {
this.selectedItems.push(item);
this.inputValue = '';
this.showOptions = false;
}
},
addOption() {
if (this.inputValue.trim()) {
this.options.push(this.inputValue.trim());
this.selectItem(this.inputValue.trim());
this.inputValue = '';
}
this.showOptions = false;
},
removeItem(index) {
this.selectedItems.splice(index, 1);
},
handleBlur() {
setTimeout(() => {
this.showOptions = false;
}, 200);
}
}
};
</script>
<style scoped>
/* 添加你的样式 */
</style>
在这个组件中,我们有一个输入框用于输入或选择选项,一个下拉列表显示所有可选选项,并允许添加新选项。已选择的选项会显示在下方,并附带删除按钮。
你可以在你的页面中使用这个组件,并绑定相关事件或数据,以满足你的具体需求。例如:
<template>
<view>
<custom-select />
</view>
</template>
<script>
import CustomSelect from '@/components/custom-select.vue';
export default {
components: {
CustomSelect
}
};
</script>
这样,你就拥有了一个功能齐全的自定义可输入select插件。你可以根据需要进一步扩展和优化这个组件,比如添加样式、验证逻辑等。