iboss_wx_app/components/dkbase/dk-select-field/dk-select-field.js

// components/dkbase/dk-select-field/dk-select-field.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
      label:{
        type: String,
      },
      placeholder:{
        type: String
      },
      inputClass:{
        type:String
      },
      readonly:{
        type: Boolean,
        value: false
      },
      errorMessage:{
        type: String
      },
      border:{
        type: Boolean,
        value: false
      },
      required: {
        type: Boolean,
        value: false
      },
      labelClass: {
        type: String
      },
      iconUrl: {
        type: String
      },
      fieldValue: {
        type: String
      },
      valueList: {
        type: Array
      }
    },
    /**
     * 组件的初始数据
     */
    data: {
      selectListShow: false,
      selectList: [],
      fieldAddress:{}
    },
    lifetimes:{
      attached(){
        const that = this
        const query = this.createSelectorQuery();
        query.select("#vanField").boundingClientRect();
        query.exec((res) => {
          that.setData({
            fieldAddress: res[0]
          })
        });
      }
    },
    /**
     * 组件的方法列表
     */
    methods: {
    /**
     * @desc   : icon点击事件
     * @author : 刘尧
     * @date   : 2024/7/2 11:34
     */
      open(e){
        this.triggerEvent('iconClick')
      },
      /**
       * @desc   : 输入框失去焦点隐藏列表
       * @author : 刘尧
       * @date   : 2024/7/2 11:34
       */
      blurField(e){
        const valueList = this.data.valueList
        const inputValue = e.detail.value
        const selectList = valueList.filter(res => res.supName === inputValue)
        this.setData({
          selectListShow: false
        })
        this.triggerEvent('selectCellValue', selectList[0])
      },
      /**
       * @desc   : 输入监听事件
       * @author : 刘尧
       * @date   : 2024/7/2 11:34
       */
      inputField(e){
        const valueList = this.data.valueList
        if(e.detail && e.detail !== ""){
          const selectList = valueList.filter((item) => item.supName.includes(e.detail))
          this.setData({
            selectListShow: true,
            selectList: selectList
          })
        }else {
          this.setData({
            selectListShow: false,
            selectList: []
          })
        }
        this.triggerEvent('inputValue', e.detail)
      },
      clickCell(e){
        this.triggerEvent('selectCellValue', e.currentTarget.dataset.item)
      }
    }
})