更新记录

1.1.2（2026-01-27） 下载此版本

优化

1.1.1（2026-01-27） 下载此版本

支持多选； 支持插槽自定义下拉内容； 支持弹出位置定义；

1.1.0（2026-01-27） 下载此版本

修复已知问题，优化文档介绍，支持v-modal，支持Vue2和Vue3

平台兼容性

uni-app(4.08)

uni-app x(4.08)

qiao-select 搜索下拉选择框

一个支持搜索过滤的下拉选择框组件，适用于 uni-app 项目，兼容 Vue2 和 Vue3。

特性

• 支持输入搜索过滤下拉选项
• 支持 v-model 双向绑定
• 支持自定义显示字段和搜索字段
• 支持禁用、清空等功能
• 兼容 Vue2 / Vue3

安装使用

1. 引入组件

import qiaoSelect from '@/uni_modules/qiao-select/components/qiao-select/qiaoSelect.vue'

2. 注册组件

Vue2 需要手动注册：

export default {
  components: {
    qiaoSelect
  }
}

Vue3 引入后可直接使用，无需注册。

3. 基础用法

<view style="width: 300rpx;">
  <qiaoSelect
    :keyId="1"
    :dataList="orgArray"
    phText="选择机构名称"
    showKey="name"
    searchKey="name"
    v-model="value"
    @change="selectChange"
  />
</view>

// 数据示例
const orgArray = [
  { id: 1, name: '机构A' },
  { id: 2, name: '机构B' },
  { id: 3, name: '机构C' }
]

// 选择回调
function selectChange(e) {
  if (e) {
    console.log('选中：', e)
  } else {
    console.log('已清空')
  }
}

属性说明

事件说明

方法

通过 ref 调用组件方法：

<qiaoSelect ref="selectRef" ... />

// 清空选中值
this.$refs.selectRef.clickClear()

设置默认值

通过 v-model 绑定默认值：

// returnType = 'object' 时，传入完整对象
this.value = { id: 1, name: '机构A' }

// returnType = 'key' 时，传入对应字段的值
this.value = 1  // 假设 returnKey = 'id'

清空组件

两种方式：

// 方式1：通过 v-model 赋值 null
this.value = null

// 方式2：通过 ref 调用方法
this.$refs.selectRef.clickClear()

多选模式

<qiaoSelect
  :dataList="list"
  v-model="selectedValues"
  :multiple="true"
  :multipleLimit="3"
  phText="请选择（最多3项）"
/>

// 多选时 v-model 绑定数组
data() {
  return {
    selectedValues: []  // 或预设值 [obj1, obj2] / [id1, id2]
  }
}

多选特性：

• 点击选项切换选中状态，不会关闭弹窗
• 已选项显示勾选图标
• 显示区域用顿号分隔多个选中项
• multipleLimit 可限制最大选择数量

插槽

option 插槽

自定义选项列表项的显示：

<qiaoSelect :dataList="list" v-model="value">
  <template #option="{ item, index, selected }">
    <view class="custom-option">
      <image :src="item.icon" class="icon" />
      <text>{{ item.name }}</text>
      <text v-if="item.desc" class="desc">{{ item.desc }}</text>
    </view>
  </template>
</qiaoSelect>

selected 插槽

自定义已选中内容的显示（仅在 searchable=false 或 multiple=true 时生效）：

<qiaoSelect :dataList="list" v-model="value" :searchable="false">
  <template #selected="{ value, items, text }">
    <view class="custom-selected">
      <image v-if="value && value.icon" :src="value.icon" />
      <text>{{ text || '请选择' }}</text>
    </view>
  </template>
</qiaoSelect>

注意事项

1. 组件外层需要设置宽度，否则会自动撑满父容器
2. 多个组件同时使用时，建议设置不同的 keyId 以实现互斥关闭
3. 使用 returnType: 'key' 时，returnKey 为必填项
4. 多选模式下，v-model 绑定的是数组
5. 使用 option 插槽时，多选的勾选图标仍会自动显示