Technology Sharing

uniapp uni-combox Data source usage object, select it to get the ID of the corresponding item, and specify a custom balbel, value

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Background: The uni-combox data source in uniApp only supports one-dimensional arrays. It is not possible to specify a specific ID for each option, and it is not possible to return the ID after selecting it. The original source code is modified as follows:

  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>

use:

  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区'}])

 

While learning from others' modifications, we also made compatibility features such as fault tolerance, asynchronous backfilling, and null value tolerance.

You can use the above code to directly replace the file in the project's src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue.

You can also use the above files as a component without installing them.

Personal profile

I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages ​​such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.

my contact information

Mail