Technology sharing

uniapp uni-combox notitia fonte obiecti utitur.

2024-07-12

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

Background: Fons uni-combox in uniApp solum sustinet acceptionem unius dimensionis vestium. Impossibile est id specificare pro singulis optionibus specificare, et ID post delectu redire impossibile est.

  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>

utere;

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

 

Dum discit ab aliis modificationibus, compatitur etiam culpa tolerantiae, backfill asynchrona, et culpa tolerantiae ad nullos inueniendi valores.

Superiore codice uti potes ut hunc fasciculum directe reponere in src/uni_modules/uni-combox/components/uni-combox/uni-combox.vue projecti reponere.

Potes etiam uti fasciculo superiore directo ut componente sine inaugurando.

Personal profile

technologiae technologiae plus quam 30 annos operam dedit et in variis linguis proficit ut java, linux, javascript, php, css, etc. Multas contributiones in aperto fonte campo fecit elit documentorum statione ad communicandas quaestiones technologiarum progressus ad futuram referentiam

mihi contactus notitia

Mail