前往插件市场安装插件下拉搜索选择框 - DCloud 插件市场，该插件示例代码有vue2和vue3代码
是支持微信小程序和app的
示例代码：
<template><view><!-- 基础用法 --><cuihai-select-search:options="options"v-model="value"placeholder="请选择"@change="onChange"/><!-- 多选模式 --><cuihai-select-search:options="options"v-model="multipleValue"multipleplaceholder="请选择多个"@change="onMultipleChange"/></view>
</template><script>
export default {data() {return {value: '',multipleValue: [],options: [{ value: '1', label: '选项1' },{ value: '2', label: '选项2' },{ value: '3', label: '选项3' }]}},methods: {onChange(value, option) {console.log('选择变化:', value, option)},onMultipleChange(values, options) {console.log('多选变化:', values, options)}}
}
</script>属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| options | Array | [] | 选项数据数组 |
| value | String/Number/Array | null | 当前选中值 |
| multiple | Boolean | false | 是否多选 |
| searchable | Boolean | true | 是否可搜索 |
| placeholder | String | '请选择' | 占位符文本 |
| searchPlaceholder | String | '请选择' | 搜索占位符 |
| disabled | Boolean | false | 是否禁用 |
| maxHeight | String | 300rpx | 下拉框最大高度 |
| emptyText | String | 暂无数据 | 空数据提示 |
| valueKey | String | value | 选项值字段名 |
| labelKey | String | label | 选项标签字段名 |
| showConfirmButton | Boolean | false | 多选模式是否显示确认按钮 |
| autoClose | Boolean | true | 是否自动关闭下拉框（单选模式） |
事件说明
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 选择变化时触发 | (value, option) 或 (values, options) |
| input | 值变化时触发 | value 或 values |
数据格式
[{ value: '1', label: '选项1' },{ value: '2', label: '选项2' },{ value: '3', label: '选项3' }
]