更新记录

1.0.5（2025-06-12） 下载此版本

更新文档

1.0.4（2025-06-11） 下载此版本

无

1.0.3（2025-06-11） 下载此版本

平台兼容性

uni-app

其他

下拉搜索选择框

一个功能强大的UniApp下拉选择框组件，支持搜索、单选、多选和数据回显功能。同时支持Vue2和Vue3框架。

安装

方式一：插件市场安装

在插件市场中搜索"下拉搜索选择框"，点击安装即可。

方式二：导入示例项目

1. 在HBuilderX中选择"文件" -> "新建" -> "项目"
2. 选择"uni-app" -> "从模板创建"
3. 搜索"下拉搜索选择框示例项目"
4. 点击"创建"即可导入完整的示例项目

方式三：查看内置示例

安装插件后，可以查看示例页面：pages/demo/demo.vue

使用方式

<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>

属性说明

事件说明

数据格式

[
  { value: '1', label: '选项1' },
  { value: '2', label: '选项2' },
  { value: '3', label: '选项3' }
]

版本说明

• 1.0.2：Vue3支持版本，同时兼容Vue2和Vue3框架
• 1.0.1：修复版本，解决样式和配置问题
• 1.0.0：初始版本，支持基础的单选、多选、搜索功能

注意事项

1. 组件同时支持Vue2和Vue3框架，自动适配项目Vue版本
2. 兼容所有uni-app支持的平台（H5、小程序、App等）
3. 使用时需要确保options数据格式正确
4. 项目会根据manifest.json中的vueVersion自动选择对应的初始化方式