• uniapp uni-combox 数据源使用对象，选择后获取对应项的ID，可指定自定义的balbel,value

    背景：uniApp中uni-combox数据源只支持接受一维数组，无法对每个选项指定具体的id，更无法实现选中后返回id，对原有的源码进行改造后如下：

    1. <template>
    2.   <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
    3.     <view v-if="label" class="uni-combox__label" :style="labelStyle">
    4.       <text>{{label}}</text>
    5.     </view>
    6.     <view class="uni-combox__input-box">
    7.       <input class="uni-combox__input" type="text" :placeholder="placeholder" placeholder-class="uni-combox__input-plac"
    8.         v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
    9.       <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
    10.       </uni-icons>
    11.     </view>
    12.     <view class="uni-combox__selector" v-if="showSelector">
    13.       <view class="uni-popper__arrow"></view>
    14.       <scroll-view scroll-y="true" class="uni-combox__selector-scroll" @scroll="onScroll">
    15.         <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
    16.           <text>{{emptyTips}}</text>
    17.         </view>
    18.         <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
    19.           @click="onSelectorClick(index)">
    20.           <text>{{item[`${labelKey}`]}}</text>
    21.         </view>
    22.       </scroll-view>
    23.     </view>
    24.     <uni-icons style="padding-left:20rpx;" class="content-clear-icon" type="clear" color="#c0c4cc" v-if="inputVal"
    25.       @click="onClear"></uni-icons>
    26.     <!-- :size="clearSize"
    27. 		:color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" -->
    28.     <!-- 新增蒙层，点击蒙层时关闭选项显示 -->
    29.     <view class="uni-combox__mask" v-show="showSelector" @click="showSelector = false"></view>
    30.   </view>
    31.  
    32. </template>
    33.  
    34. <script>
    35.   import {
    36.     nextTick
    37.   } from 'vue'
    38.   /**
    39.    * Combox 组合输入框
    40.    * @description 组合输入框一般用于既可以输入也可以选择的场景
    41.    * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
    42.    * @property {String} label 左侧文字
    43.    * @property {String} labelWidth 左侧内容宽度
    44.    * @property {String} placeholder 输入框占位符
    45.    * @property {Array} candidates 候选项列表
    46.    * @property {String} emptyTips 筛选结果为空时显示的文字
    47.    * @property {String} value 组合框的值
    48.    */
    49.   export default {
    50.     name: 'uniCombox',
    51.     emits: ['input', 'update:modelValue', 'change'],
    52.     props: {
    53.       border: {
    54.         type: Boolean,
    55.         default: true
    56.       },
    57.       label: {
    58.         type: String,
    59.         default: ''
    60.       },
    61.       labelWidth: {
    62.         type: String,
    63.         default: 'auto'
    64.       },
    65.       placeholder: {
    66.         type: String,
    67.         default: ''
    68.       },
    69.       candidates: {
    70.         type: Array,
    71.         default () {
    72.           return []
    73.         }
    74.       },
    75.       emptyTips: {
    76.         type: String,
    77.         default: '无匹配项'
    78.       },
    79.       labelKey: {
    80.         type: String,
    81.         default: 'dictName'
    82.       },
    83.       valueKey: {
    84.         type: String,
    85.         default: 'dictId'
    86.       },
    87.       // #ifndef VUE3
    88.       value: {
    89.         type: [String, Number],
    90.         default: ''
    91.       },
    92.       // #endif
    93.       // #ifdef VUE3
    94.       modelValue: {
    95.         type: [String, Number],
    96.         default: ''
    97.       },
    98.       // #endif
    99.     },
    100.     data() {
    101.       return {
    102.         showSelector: false,
    103.         inputVal: '',
    104.         blurTimer: null,
    105.         dictVal: "",
    106.         filterCandidates: []
    107.       }
    108.     },
    109.     computed: {
    110.       labelStyle() {
    111.         if (this.labelWidth === 'auto') {
    112.           return ""
    113.         }
    114.         return `width: ${this.labelWidth}`
    115.       },
    116.  
    117.       filterCandidatesLength() {
    118.         console.log(this.filterCandidates)
    119.         return this.filterCandidates.length
    120.       }
    121.     },
    122.     watch: {
    123.       // #ifndef VUE3
    124.       value: {
    125.         handler(newVal) {
    126.           this.dictVal = newVal
    127.         },
    128.         immediate: true
    129.       },
    130.       // #endif
    131.  
    132.       // 因为获取列表是个异步的过程，需要对列表进行监听
    133.       candidates: {
    134.          handler(arr) {
    135.            if (arr.length > 0 && this.dictVal) {
    136.              let obj = arr.find((item, index) => {
    137.                return this.dictVal == item[`${this.valueKey}`]
    138.              })
    139.              this.inputVal = obj[`${this.labelKey}`]
    140.               this.$forceUpdate(); // 强制更新 DOM
    141.            }
    142.            this.filterCandidates = arr.filter((item) => {
    143.              return item[`${this.labelKey}`].toString().indexOf(this.inputVal) > -1
    144.            })
    145.          },
    146.          immediate: true,
    147.          deep: true
    148.        },
    149.       // #ifdef VUE3
    150.       modelValue: {
    151.         handler(newVal) {
    152.           // this.inputVal = newVal
    153.           this.dictVal = newVal
    154.           if (this.candidates.length > 0 && newVal) {
    155.             let obj = this.candidates.find((item, index) => {
    156.               return newVal == item[`${this.valueKey}`]
    157.             })
    158.             // 兼容当传入错误的id在待选列表找不到时候的错误
    159.             if (obj) {
    160.               this.inputVal = obj[`${this.labelKey}`]
    161.             } else {
    162.               this.inputVal = ''
    163.             }
    164.           } else if (!newVal) { //当传入的是空值时直接将上一次回填数据清空
    165.             this.inputVal = ''
    166.           }
    167.         },
    168.         immediate: true,
    169.         deep: true,
    170.       },
    171.       // #endif
    172.     },
    173.     methods: {
    174.       toggleSelector() {
    175.         this.showSelector = !this.showSelector
    176.       },
    177.       onFocus() {
    178.         this.filterCandidates = this.candidates
    179.         this.showSelector = true
    180.       },
    181.       onBlur() {
    182.         this.blurTimer = setTimeout(() => {
    183.           this.showSelector = false
    184.         }, 153)
    185.       },
    186.       onScroll() { // 滚动时将blur的定时器关掉
    187.         if (this.blurTimer) {
    188.           clearTimeout(this.blurTimer)
    189.           this.blurTimer = null
    190.         }
    191.       },
    192.       onSelectorClick(index) {
    193.         // this.inputVal = this.filterCandidates[index]
    194.         this.dictVal = this.filterCandidates[index][`${this.valueKey}`]
    195.         //this.dictVal 的赋值一定要在this.inputVal前执行，
    196.         //因为this.filterCandidates会监听this.inputVal的变化被重新赋值
    197.         //这样在选择列表中非第一个选项会报错
    198.         this.inputVal = this.filterCandidates[index][`${this.labelKey}`]
    199.         this.showSelector = false
    200.         this.$emit('input', this.dictVal)
    201.         this.$emit('change', this.dictVal)
    202.         this.$emit('update:modelValue', this.dictVal)
    203.       },
    204.       onInput() {
    205.         this.filterCandidates = this.candidates.filter((item) => {
    206.           console.log(item, this.labelKey)
    207.           return item[`${this.labelKey}`].toString().indexOf(this.inputVal) > -1
    208.         })
    209.         setTimeout(() => {
    210.           this.$emit('input', this.dictVal)
    211.           this.$emit('update:modelValue', this.dictVal)
    212.         })
    213.       },
    214.       /**
    215.        * 清理内容
    216.        * @param {Object} event
    217.        */
    218.       onClear(event) {
    219.         this.inputVal = '';
    220.       },
    221.     }
    222.   }
    223. </script>
    224.  
    225. <style lang="scss">
    226.   .uni-combox {
    227.     font-size: 14px;
    228.     border: 1px solid #DCDFE6;
    229.     border-radius: 4px;
    230.     // padding: 6px 10px;
    231.     padding: 10px 6px 10px 0;
    232.     position: relative;
    233.     /* #ifndef APP-NVUE */
    234.     display: flex;
    235.     /* #endif */
    236.     // height: 40px;
    237.     flex-direction: row;
    238.     align-items: center;
    239.     // border-bottom: solid 1px #DDDDDD;
    240.   }
    241.  
    242.   .uni-combox__label {
    243.     font-size: 16px;
    244.     line-height: 22px;
    245.     padding-right: 10px;
    246.     color: #999999;
    247.   }
    248.  
    249.   .uni-combox__input-box {
    250.     padding-left: 10px;
    251.     position: relative;
    252.     /* #ifndef APP-NVUE */
    253.     display: flex;
    254.     /* #endif */
    255.     flex: 1;
    256.     flex-direction: row;
    257.     align-items: center;
    258.   }
    259.  
    260.   .uni-combox__input {
    261.     flex: 1;
    262.     font-size: 14px;
    263.     height: 22px;
    264.     line-height: 22px;
    265.   }
    266.  
    267.   .uni-combox__input-plac {
    268.     font-size: 14px;
    269.     color: #999;
    270.   }
    271.  
    272.   .uni-combox__selector {
    273.     /* #ifndef APP-NVUE */
    274.     box-sizing: border-box;
    275.     /* #endif */
    276.     position: absolute;
    277.     top: calc(100% + 12px);
    278.     left: 0;
    279.     width: 100%;
    280.     background-color: #FFFFFF;
    281.     border: 1px solid #EBEEF5;
    282.     border-radius: 6px;
    283.     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    284.     z-index: 3;
    285.     padding: 4px 0;
    286.   }
    287.  
    288.   .uni-combox__selector-scroll {
    289.     /* #ifndef APP-NVUE */
    290.     max-height: 200px;
    291.     box-sizing: border-box;
    292.     /* #endif */
    293.   }
    294.  
    295.   .uni-combox__selector-empty,
    296.   .uni-combox__selector-item {
    297.     /* #ifndef APP-NVUE */
    298.     display: flex;
    299.     cursor: pointer;
    300.     /* #endif */
    301.     line-height: 36px;
    302.     font-size: 14px;
    303.     text-align: center;
    304.     // border-bottom: solid 1px #DDDDDD;
    305.     padding: 0px 10px;
    306.     white-space: nowrap;
    307.     overflow: auto;
    308.   }
    309.  
    310.   .uni-combox__selector-item::-webkit-scrollbar {
    311.     width: 0;
    312.     height: 0;
    313.   }
    314.  
    315.   .uni-combox__selector-item:hover {
    316.     background-color: #f9f9f9;
    317.   }
    318.  
    319.   .uni-combox__selector-empty:last-child,
    320.   .uni-combox__selector-item:last-child {
    321.     /* #ifndef APP-NVUE */
    322.     border-bottom: none;
    323.     /* #endif */
    324.   }
    325.  
    326.   // picker 弹出层通用的指示小三角
    327.   .uni-popper__arrow,
    328.   .uni-popper__arrow::after {
    329.     position: absolute;
    330.     display: block;
    331.     width: 0;
    332.     height: 0;
    333.     border-color: transparent;
    334.     border-style: solid;
    335.     border-width: 6px;
    336.   }
    337.  
    338.   .uni-popper__arrow {
    339.     filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
    340.     top: -6px;
    341.     left: 10%;
    342.     margin-right: 3px;
    343.     border-top-width: 0;
    344.     border-bottom-color: #EBEEF5;
    345.   }
    346.  
    347.   .uni-popper__arrow::after {
    348.     content: " ";
    349.     top: 1px;
    350.     margin-left: -6px;
    351.     border-top-width: 0;
    352.     border-bottom-color: #fff;
    353.   }
    354.  
    355.   .uni-combox__no-border {
    356.     border: none;
    357.   }
    358.  
    359.   .uni-combox__mask {
    360.     width: 100%;
    361.     height: 100%;
    362.     position: fixed;
    363.     top: 0;
    364.     left: 0;
    365.     z-index: 1;
    366.   }
    367. </style>

    使用：

    1.  <uni-combox :candidates="testList" labelKey="text" valueKey="idx" emptyTips='暂无数据' placeholder="请选择"
    2.             v-model="groupId" @change="selectGroupab">
    3.           </uni-combox>
    4.   // 选择区/苑
    5.   const selectGroupab = (val) => {
    6.     console.log(' 选择改变回调', val)
    7.    
    8.   }
    9. const groupId =ref('')
    10. const testList =ref([{idx：1，text:'A区'},{idx：2，text:'B区'}])

     

    有借鉴他人的修改的同时进行了容错，异步回填，传入空值容错等兼容。

    可以用以上代码可以在项目的src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue直接替换该文件，

    也可以不进行安装，直接将以上文件当做一个组件使用

  • 相关阅读:
    关于RSA常见的错误理解
    osgEarth示例分析——osgearth_graticule
    【C语言】C语言中执行命令
    使用 jQuery 来动态地设置 HTML 按钮的显示和隐藏
    前端播放m3u8格式视频
    Pytorch Pytorch+深度学习神经网络相关学习收获
    软件全过程，全周期，各阶段资料获取（2024整理原件）
    css-vxe-form-item中输入框加自定义按钮（校验位置错误）
    构建直接序列扩频系统模型（Matlab代码实现）
    卷积神经网络（CNN）：乳腺癌识别
  • 原文地址：https://blog.csdn.net/qq_34645412/article/details/140346421