前往插件市场安装插件下拉搜索选择框 - 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"
multiple
placeholder="请选择多个"
@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' }
]