下拉选择,单选,精准搜索,模糊搜索,清除选择 - 更新日志

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)
    },
  },
}