From 009f08a39b1e76c42e592af4efb72b556dc13a7e Mon Sep 17 00:00:00 2001 From: mhpei Date: Tue, 30 Apr 2024 17:26:16 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat=E2=9C=A8:=20uni-data-select=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=A4=9A=E9=80=89=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../uni-data-select/uni-data-select.vue | 170 +++++++++++++++++- 1 file changed, 161 insertions(+), 9 deletions(-) diff --git a/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue b/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue index ba3d70f3..f599f2ab 100644 --- a/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue +++ b/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue @@ -2,8 +2,8 @@ {{label + '：'}} - - + + {{textShow}} {{typePlaceholder}} @@ -13,6 +13,21 @@ + + + {{item}} + + + + + {{typePlaceholder}} + + + + + + + @@ -20,10 +35,16 @@ {{emptyTips}} - {{formatItemName(item)}} + + + {{formatItemName(item)}} + + + @@ -46,6 +67,9 @@ * @property {String} placement 弹出位置 * @value top 顶部弹出 * @value bottom 底部弹出（default) + * @property {String} mode = [multiple|single] 设置select的模式类型 + * @value multiple 多选 + * @value single 单选 * @event {Function} change 选中发生变化触发 */ @@ -64,7 +88,7 @@ default: '' }, modelValue: { - type: [String, Number], + type: [String, Number, Array], default: '' }, label: { @@ -99,6 +123,10 @@ placement: { type: String, default: 'bottom' + }, + mode: { + type: String, + default: 'single' } }, data() { @@ -109,6 +137,9 @@ apps: [], channels: [], cacheKey: "uni-data-select-lastSelectedValue", + checkedIds: [], + checkedVals: [], + checkedKeys: [], }; }, created() { @@ -202,7 +233,7 @@ }, initDefVal() { let defValue = '' - if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) { + if ((this.valueCom || (this.valueCom === 0 && this.mode === 'single') || (Array.isArray(this.valueCom) && this.mode === 'multiple')) && !this.isDisabled(this.valueCom)) { defValue = this.valueCom } else { let strogeValue @@ -222,6 +253,24 @@ this.emit(defValue) } } + + if (this.mode === 'multiple') { + let defaultIds = [], defaultVals = [], defaultKeys = [] + + this.mixinDatacomResData.forEach((item, index) => { + if (~defValue.indexOf(item.value)) { + defaultIds.push(index) + defaultVals.push(item.text) + defaultKeys.push(item.value) + } + }) + + this.checkedIds = defaultIds + this.checkedVals = defaultVals + this.checkedKeys = defaultKeys + return + } + const def = this.mixinDatacomResData.find(item => item.value === defValue) this.current = def ? this.formatItemName(def) : '' }, @@ -242,12 +291,43 @@ return isDisabled; }, + /** + * 获取选中的选项 + * @param {Object | Number} value 选中内容 | 索引 + * @param {String} type 类型 + * - 'IDS' 选中的索引 + * - 'VALS' 选中的 text + * - 'KEYS' 选中的 value + */ + getCheckedItem(value, type) { + let checkeds = { + 'IDS': this.checkedIds, + 'VALS': this.checkedVals, + 'KEYS': this.checkedKeys + }[type] || [] + const checkedsIds = checkeds.indexOf(value) + + if (~checkedsIds) { + checkeds.splice(checkedsIds, 1) + return checkeds + } + + checkeds.push(value); + return checkeds; + }, + clearVal() { this.emit('') if (this.collection) { this.removeCache() } }, + clearValMultiple() { + this.emitMultiple([], []) + this.checkedIds = [] + this.checkedVals = [] + this.checkedKeys = [] + }, change(item) { if (!item.disable) { this.showSelector = false @@ -255,6 +335,22 @@ this.emit(item.value) } }, + changeMultiple(item, index) { + if (!item.disable) { + this.checkedIds = this.getCheckedItem(index, 'IDS') + this.checkedVals = this.getCheckedItem(this.formatItemName(item), 'VALS') + this.checkedKeys = this.getCheckedItem(this.formatItemKey(item), 'KEYS') + + this.emitMultiple(this.checkedVals, this.checkedKeys) + } + }, + remove(index) { + this.checkedIds.splice(index, 1) + this.checkedVals.splice(index, 1) + this.checkedKeys.splice(index, 1) + + this.emitMultiple(this.checkedVals, this.checkedKeys) + }, emit(val) { this.$emit('input', val) this.$emit('update:modelValue', val) @@ -263,6 +359,13 @@ this.setCache(val); } }, + emitMultiple(vals, keys) { + const valStr = vals.join(',') + + this.$emit('update:modelValue', keys) + this.$emit('change', valStr) + this.$emit('input', valStr) + }, toggleSelector() { if (this.disabled) { return @@ -296,6 +399,9 @@ ) } }, + formatItemKey(item) { + return item.value + }, // 获取当前加载的数据 getLoadData() { return this.mixinDatacomResData; @@ -387,12 +493,17 @@ border-bottom: solid 1px $uni-border-3; width: 100%; flex: 1; - height: 35px; + min-height: 35px; &--disabled { background-color: #f5f7fa; cursor: not-allowed; } + + &--multiple { + height: auto; + padding-top: 4px; + } } .uni-select__label { @@ -404,7 +515,7 @@ } .uni-select__input-box { - height: 35px; + min-height: 35px; position: relative; /* #ifndef APP-NVUE */ display: flex; @@ -412,6 +523,16 @@ flex: 1; flex-direction: row; align-items: center; + + &--multiple { + overflow: hidden; + height: auto; + } + + &--data { + flex-wrap: wrap; + padding-right: 20px; + } } .uni-select__input { @@ -468,12 +589,23 @@ text-align: center; /* border-bottom: solid 1px $uni-border-3; */ padding: 0px 10px; + display: flex; + align-items: center; + justify-content: space-between; + + &--checked { + background-color: #e9f4fe; + } } .uni-select__selector-item:hover { background-color: #f9f9f9; } + .uni-select__selector-item--checked:hover { + background-color: #e9f4fe; + } + .uni-select__selector-empty:last-child, .uni-select__selector-item:last-child { /* #ifndef APP-NVUE */ @@ -535,7 +667,6 @@ border-top-color: #fff; } - .uni-select__input-text { // width: 280px; width: 100%; @@ -546,6 +677,27 @@ overflow: hidden; } + .uni-select__input-clear { + position: absolute; + right: 0px; + } + + .uni-select__input-checked { + padding: 4px 8px; + border-radius: 6px; + margin-right: 4px; + margin-bottom: 4px; + display: flex; + flex-direction: row; + align-items: center; + background-color: #e4e2e2; + } + + .uni-select__input-checked-text { + color: #1d1d1d; + margin-right: 4px; + } + .uni-select__input-placeholder { color: $uni-base-color; font-size: 12px; @@ -559,4 +711,4 @@ left: 0; z-index: 2; } - + From 1b5fb8f21ff9676ac5a7acfed5d627f3a9a21fc9 Mon Sep 17 00:00:00 2001 From: mhpei Date: Tue, 30 Apr 2024 17:36:04 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat=E2=9C=A8:=20uni-data-select=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=A4=9A=E9=80=89=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/vue/data-select/data-select.vue | 83 +++++++++++++++++++++++---- 1 file changed, 72 insertions(+), 11 deletions(-) diff --git a/pages/vue/data-select/data-select.vue b/pages/vue/data-select/data-select.vue index f3790a86..fbe4d7b7 100644 --- a/pages/vue/data-select/data-select.vue +++ b/pages/vue/data-select/data-select.vue @@ -3,15 +3,15 @@ 通过数据驱动的单选框和复选框，可直接通过连接 uniCloud 获取数据，同时可以配合表单组件 uni-forms 使用 - - - - - - - - - + + + + + + + + +