下拉选择,单选,精准搜索,模糊搜索,清除选择 - 更新日志
1.0.14(2024-01-12)
添加外部控制关闭下拉框字段
1.0.13(2023-11-16)
想要清除icon和箭头icon同时存在的话 找到组件中的这段代码替换成下方这段并需要自己修改一下样式
<view class="icon_arrow" @click="clearItem">
<view class="arrow-clear" style="margin-right: 12rpx;" v-if="value&&clearable">x</view>
<view v-if="!filterable" :class="['arrow',show?'arrow_down':'arrow_up']" ></view>
</view>
1.0.12(2023-11-16)
解决微信小程序手机预览下拉框不能滑动问题
1.0.11(2023-10-26)
优化问题:app安卓端不能滑动选项
选择的方案是用scroll-view代替view在app安卓环境下
1.0.10(2023-10-25)
优化占位符字号
1.0.9(2023-10-25)
优化问题:不传filterable只传placeholder的话占位内容不显示
1.0.8(2023-10-20)
问题:“我v-model绑定默认选中值的id,下拉框显示选中了,但是框中没有回显id对应的label值,还是显示默认的“请选择数据” ”
当下拉框的数据格式不再是
[
{
label:'',
value:''
}
]
这种格式的时候,我们就需要用到 valueType 这个字段来代指一下 如:当我们的数据变成 [ { id:'', title:'' } ] 时,我们就需要给组件加上valueType数据来代指 { label:'title', value:'id' }
解决h5上点击不生效问题
1.0.7(2023-09-14)
解决:"接口返回列表,默认选中某个选项,选中时选中了,但是框中没有回显"的问题
1.0.6(2023-08-21)
优化搜索时出现下拉框不消失问题
1.0.4(2023-08-14)
优化清除失效问题
1.0.3(2023-08-14)
自定义数据时和自定义别名错误优化
1.0.2(2023-06-28)
优化(多选择几次,下拉里面的数据显示有问题,比如我下拉里面有20条数据,多选择几次后,下拉里面就显示2条或者1条)的问题
1.0.1(2023-06-27)
优化搜索时点击框不展示下拉内容问题
1.0.0(2023-05-16)
cus-selects
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | '' | 选择的内容 |
data | Array | [] | 下拉选择的数据 |
valueType | Object | {label:'label',value:'value'} | 下拉选择数据的别名 |
clearable | Boolean | false | 是否可以清空选项 |
filterable | Boolean | false | 是否可搜索 |
searchType | Number | 1 | 搜索类型,1:模糊搜素2:精确搜索 |
placeholder | String | '请选择' | 占位符 |
showTitle | Boolean | true | 是否显示标题占位图 |
noDataText | String | ‘暂无数据’ | 选项为空时显示的文字 |
arrLeft | Number | 20 | 选项区域的箭头巨左的间距 |
size | Number | 240 | 选择框的宽 |
|事件| | @change 选中的值 |
使用示例
//基础用法
<cus-selects v-model="value"></cus-selects>
//可清空
<cus-selects v-model="value" :clearable='true'></cus-selects>
// 模糊搜索
<cus-selects v-model="value" :clearable='true' :filterable='true' :searchType='1'></cus-selects>
// 精确搜索
<cus-selects v-model="value" @change='change' :clearable='true' :filterable='true' :searchType='2'></cus-selects>
import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
export default {
components: {
cusSelects
},
data() {
return {
value:''
}
},
methods: {
change(e) {
console.log(e)
},
},
}