Technologieaustausch

Die Uniapp-Uni-Combox-Datenquelle verwendet das Objekt. Nach der Auswahl können die ID des entsprechenden Elements und der Wert angegeben werden.

2024-07-12

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

Hintergrund: Die Uni-Combox-Datenquelle in uniApp unterstützt nur das Akzeptieren eindimensionaler Arrays. Es ist nicht möglich, für jede Option eine bestimmte ID anzugeben, und es ist nicht möglich, die ID nach der Auswahl zurückzugeben. Der ursprüngliche Quellcode wird wie folgt geändert:

  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>

verwenden:

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

 

Während es von den Änderungen anderer lernt, ist es auch mit Fehlertoleranz, asynchronem Backfill und Fehlertoleranz für eingehende Nullwerte kompatibel.

Sie können den obigen Code verwenden, um diese Datei direkt in src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue des Projekts zu ersetzen.

Sie können die obige Datei auch direkt als Komponente verwenden, ohne sie zu installieren.

Persönliches Profil

Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post