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

1.0.15（2025-04-10）

为一个页面多次使用组件出现下拉框同时弹出问题提供思路因为目前没有测试的条件

//1.在组件中监听点击事件
mounted() {
            // 监听页面点击，非自身区域则关闭
            document.addEventListener('click', this.closeDropdown);
        },
        beforeDestroy() {
            document.removeEventListener('click', this.closeDropdown);
        },
//2.处理事件
methods:{
 closeDropdown(e){
                //this.$el.contains(e.target)方法用于判断一个元素是否包含另一个元素。在Vue中，this.$el代表Vue实例关联的DOM元素，而.contains()是一个DOM方法，用于检查一个节点是否是另一个节点或其子节点的后代。
                if (!this.$el.contains(e.target)) {
                    this.show = false;
                    // this.$emit("update:closeSelect", this.show)
                    this.isClick = false
                }
            },
}

// 3.在组件中搜索closeSelect删掉有关操作

使用示例

    //基础用法
    <cus-selects   v-model="value"></cus-selects>

import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
export default {
  components: {
    cusSelects
  },
  data() {
    return {
      value:'',
      selectList:[ //根据自己需求获得的下拉数据，如果数据不是{label:'',value:''}结构的就需要起一个别名来代指一下，就需要valueType
        {
            id:1,
            title:'hahah',
        },
        {
            id:2,
            title:'hahah1',
        },
        {
            id:3,
            title:'hahah3',
        }
      ],
      alias:{ //别名来代指一下
        label:'title',
        value:'id'
      },
    }
  },
  methods: {
    change(e) {
      console.log(e) //这里返回的是value值
    },
  },
}

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

属性说明

|事件| | @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)
    },
  },
}