更新记录

1.0.8（2023-12-26） 下载此版本

修改h5端样式报错

1.0.7（2023-07-04） 下载此版本

优化宽度太窄的时候显示效果；

1.0.6（2023-06-16） 下载此版本

优化；

平台兼容性

uni-app

其他

示例代码：

1、引入：

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

2、添加：

components: {
    qiaoSelect
},

3、使用：

组件默认展示的是【name】字段，可通过showField设置，最终@change返回整个选择的对象

如果需要设置初始默认值，通过showObj设置，赋值要展示的条目对象

组件外层View可以给个宽度

<view style="width: 300rpx;">
    <qiaoSelect :keyId="1" :dataList="orgArray" phText="选择机构名称" phColor="#999999" showField="name" searchKey="name"
        :showObj="showObj" :showBorder="false" :disabled="false" @change="selectChange" @input='inputChange'></qiaoSelect>
</view>

selectChange(e) {//返回选择的对象，如果输入框清空，返回null
    if (e) {
        this.mechId = e.id
    } else {
        this.mechId = ''
    }
},
inputChange(e) {//返回搜索结果集合,一般用不到
    console.log(e)
},

可以通过以下2种方法清空指定的组件：
1、加上 showObj 字段，然后将它设置为null，就清空了
2、给组件加一个ref='xxx'，然后通过this.$refs.xxx.clickClear()清空

【属性介绍】：

dataList：           下拉数据

keyId：              唯一键，用于多个关闭

showField:      要展示的字段，默认name

showObj:            设置展示的条目对象，可用来设置默认值

phText：             提示语

phColor：            提示语颜色

searchKey：      指定搜索的字段，不设置使用展示字段showField搜索

showBorder：     是否显示边框

disabled:           是否禁用

@change:            返回选择的对象，如果输入框清空，返回null

@input:             返回搜索结果集合