前往插件市場安裝插件下拉搜索選擇框 - 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' }
]?
)
