Partage de technologie

La source de données uniapp uni-combox utilise l'objet. Après la sélection, l'ID de l'élément correspondant est obtenu et la valeur peut être spécifiée.

2024-07-12

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

Contexte : La source de données uni-combox dans uniApp ne prend en charge que les tableaux unidimensionnels. Il est impossible de spécifier un ID spécifique pour chaque option et il est impossible de renvoyer l'ID après la sélection. Le code source d'origine est modifié comme suit :

  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>

utiliser:

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

 

Tout en apprenant des modifications apportées par d'autres personnes, il est également compatible avec la tolérance aux pannes, le remplissage asynchrone et la tolérance aux pannes pour les valeurs nulles entrantes.

Vous pouvez utiliser le code ci-dessus pour remplacer directement ce fichier dans le fichier src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue du projet.

Vous pouvez également utiliser le fichier ci-dessus directement comme composant sans l'installer.

Profil personnel

Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.

mes coordonnées

Mail