introduce.md 1.7 KB

示例代码:

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:             返回搜索结果集合