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

鱿鱼仔姐夫

于 2024-07-16 04:38:49 发布

阅读量19

点赞数

文章标签： uni-app 前端 javascript vue.js 开发语言

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

<template>
  <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
    <view v-if="label" class="uni-combox__label" :style="labelStyle">
      <text>{{label}}</text>
    </view>
    <view class="uni-combox__input-box">
      <input class="uni-combox__input" type="text" :placeholder="placeholder" placeholder-class="uni-combox__input-plac"
        v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
      <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
      </uni-icons>
    </view>
    <view class="uni-combox__selector" v-if="showSelector">
      <view class="uni-popper__arrow"></view>
      <scroll-view scroll-y="true" class="uni-combox__selector-scroll" @scroll="onScroll">
        <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
          <text>{{emptyTips}}</text>
        </view>
        <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
          @click="onSelectorClick(index)">
          <text>{{item[`${labelKey}`]}}</text>
        </view>
      </scroll-view>
    </view>
    <uni-icons style="padding-left:20rpx;" class="content-clear-icon" type="clear" color="#c0c4cc" v-if="inputVal"
      @click="onClear"></uni-icons>
    <!-- :size="clearSize"
		:color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" -->
    <!-- 新增蒙层，点击蒙层时关闭选项显示 -->
    <view class="uni-combox__mask" v-show="showSelector" @click="showSelector = false"></view>
  </view>

</template>

<script>
  import {
    nextTick
  } from 'vue'
  /**
   * Combox 组合输入框
   * @description 组合输入框一般用于既可以输入也可以选择的场景
   * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
   * @property {String} label 左侧文字
   * @property {String} labelWidth 左侧内容宽度
   * @property {String} placeholder 输入框占位符
   * @property {Array} candidates 候选项列表
   * @property {String} emptyTips 筛选结果为空时显示的文字
   * @property {String} value 组合框的值
   */
  export default {
    name: 'uniCombox',
    emits: ['input', 'update:modelValue', 'change'],
    props: {
      border: {
        type: Boolean,
        default: true
      },
      label: {
        type: String,
        default: ''
      },
      labelWidth: {
        type: String,
        default: 'auto'
      },
      placeholder: {
        type: String,
        default: ''
      },
      candidates: {
        type: Array,
        default () {
          return []
        }
      },
      emptyTips: {
        type: String,
        default: '无匹配项'
      },
      labelKey: {
        type: String,
        default: 'dictName'
      },
      valueKey: {
        type: String,
        default: 'dictId'
      },
      // #ifndef VUE3
      value: {
        type: [String, Number],
        default: ''
      },
      // #endif
      // #ifdef VUE3
      modelValue: {
        type: [String, Number],
        default: ''
      },
      // #endif
    },
    data() {
      return {
        showSelector: false,
        inputVal: '',
        blurTimer: null,
        dictVal: "",
        filterCandidates: []
      }
    },
    computed: {
      labelStyle() {
        if (this.labelWidth === 'auto') {
          return ""
        }
        return `width: ${this.labelWidth}`
      },

      filterCandidatesLength() {
        console.log(this.filterCandidates)
        return this.filterCandidates.length
      }
    },
    watch: {
      // #ifndef VUE3
      value: {
        handler(newVal) {
          this.dictVal = newVal
        },
        immediate: true
      },
      // #endif

      // 因为获取列表是个异步的过程，需要对列表进行监听
      candidates: {
         handler(arr) {
           if (arr.length > 0 && this.dictVal) {
             let obj = arr.find((item, index) => {
               return this.dictVal == item[`${this.valueKey}`]
             })
             this.inputVal = obj[`${this.labelKey}`]
              this.$forceUpdate(); // 强制更新 DOM
           }
           this.filterCandidates = arr.filter((item) => {
             return item[`${this.labelKey}`].toString().indexOf(this.inputVal) > -1
           })
         },
         immediate: true,
         deep: true
       },
      // #ifdef VUE3
      modelValue: {
        handler(newVal) {
          // this.inputVal = newVal
          this.dictVal = newVal
          if (this.candidates.length > 0 && newVal) {
            let obj = this.candidates.find((item, index) => {
              return newVal == item[`${this.valueKey}`]
            })
            // 兼容当传入错误的id在待选列表找不到时候的错误
            if (obj) {
              this.inputVal = obj[`${this.labelKey}`]
            } else {
              this.inputVal = ''
            }
          } else if (!newVal) { //当传入的是空值时直接将上一次回填数据清空
            this.inputVal = ''
          }
        },
        immediate: true,
        deep: true,
      },
      // #endif
    },
    methods: {
      toggleSelector() {
        this.showSelector = !this.showSelector
      },
      onFocus() {
        this.filterCandidates = this.candidates
        this.showSelector = true
      },
      onBlur() {
        this.blurTimer = setTimeout(() => {
          this.showSelector = false
        }, 153)
      },
      onScroll() { // 滚动时将blur的定时器关掉
        if (this.blurTimer) {
          clearTimeout(this.blurTimer)
          this.blurTimer = null
        }
      },
      onSelectorClick(index) {
        // this.inputVal = this.filterCandidates[index]
        this.dictVal = this.filterCandidates[index][`${this.valueKey}`]
        //this.dictVal 的赋值一定要在this.inputVal前执行，
        //因为this.filterCandidates会监听this.inputVal的变化被重新赋值
        //这样在选择列表中非第一个选项会报错
        this.inputVal = this.filterCandidates[index][`${this.labelKey}`]
        this.showSelector = false
        this.$emit('input', this.dictVal)
        this.$emit('change', this.dictVal)
        this.$emit('update:modelValue', this.dictVal)
      },
      onInput() {
        this.filterCandidates = this.candidates.filter((item) => {
          console.log(item, this.labelKey)
          return item[`${this.labelKey}`].toString().indexOf(this.inputVal) > -1
        })
        setTimeout(() => {
          this.$emit('input', this.dictVal)
          this.$emit('update:modelValue', this.dictVal)
        })
      },
      /**
       * 清理内容
       * @param {Object} event
       */
      onClear(event) {
        this.inputVal = '';
      },
    }
  }
</script>

<style lang="scss">
  .uni-combox {
    font-size: 14px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    // padding: 6px 10px;
    padding: 10px 6px 10px 0;
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    // height: 40px;
    flex-direction: row;
    align-items: center;
    // border-bottom: solid 1px #DDDDDD;
  }

  .uni-combox__label {
    font-size: 16px;
    line-height: 22px;
    padding-right: 10px;
    color: #999999;
  }

  .uni-combox__input-box {
    padding-left: 10px;
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
    align-items: center;
  }

  .uni-combox__input {
    flex: 1;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
  }

  .uni-combox__input-plac {
    font-size: 14px;
    color: #999;
  }

  .uni-combox__selector {
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #EBEEF5;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 3;
    padding: 4px 0;
  }

  .uni-combox__selector-scroll {
    /* #ifndef APP-NVUE */
    max-height: 200px;
    box-sizing: border-box;
    /* #endif */
  }

  .uni-combox__selector-empty,
  .uni-combox__selector-item {
    /* #ifndef APP-NVUE */
    display: flex;
    cursor: pointer;
    /* #endif */
    line-height: 36px;
    font-size: 14px;
    text-align: center;
    // border-bottom: solid 1px #DDDDDD;
    padding: 0px 10px;
    white-space: nowrap;
    overflow: auto;
  }

  .uni-combox__selector-item::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .uni-combox__selector-item:hover {
    background-color: #f9f9f9;
  }

  .uni-combox__selector-empty:last-child,
  .uni-combox__selector-item:last-child {
    /* #ifndef APP-NVUE */
    border-bottom: none;
    /* #endif */
  }

  // picker 弹出层通用的指示小三角
  .uni-popper__arrow,
  .uni-popper__arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
  }

  .uni-popper__arrow {
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
    top: -6px;
    left: 10%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #EBEEF5;
  }

  .uni-popper__arrow::after {
    content: " ";
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff;
  }

  .uni-combox__no-border {
    border: none;
  }

  .uni-combox__mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
</style>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.

使用：

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

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

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

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

原创作者: u_12379999 转载于: https://blog.51cto.com/u_12379999/11456954

鱿鱼仔姐夫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uniapp uni-combox 数据源使用对象，选择后获取对应项的ID，可指定自定义的balbel,value...

背景：uniApp中uni-combox数据源只支持接受一维数组，无法对每个选项指定具体的id，更无法实现选中后返回id，对原有的源码进行改造后如下：登录后复制 <template> <view class="uni-combox" :class="border ? '' : 'uni-combox...
复制链接

扫一扫