From 9bce51f651aad297ef9eb6df832bfdaf1de05d84 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期三, 22 四月 2026 14:27:54 +0800
Subject: [PATCH] 青岛推送
---
node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue | 415 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 346 insertions(+), 69 deletions(-)
diff --git a/node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue b/node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue
index 81ec116..85b2d7b 100644
--- a/node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue
+++ b/node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue
@@ -2,30 +2,59 @@
<view class="uni-stat__select">
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '锛�'}}</span>
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
- <view class="uni-select" :class="{'uni-select--disabled':disabled}">
- <view class="uni-select__input-box" @click="toggleSelector">
- <view v-if="current" class="uni-select__input-text">{{textShow}}</view>
- <view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
- <view v-if="current && clear && !disabled" @click.stop="clearVal">
+ <view class="uni-select" :class="{'uni-select--disabled':disabled, 'uni-select--wrap': shouldWrap , 'border-default': mode == 'default','border-bottom': mode == 'underline'}">
+ <view class="uni-select__input-box" @click="toggleSelector" :class="{'uni-select__input-box--wrap': shouldWrap}">
+ <view v-if="slotSelected" class="slot-content padding-top-bottom" :class="{'uni-select__input-text--wrap': shouldWrap}">
+ <slot name="selected" :selectedItems="getSelectedItems()"></slot>
+ </view>
+ <template v-else>
+ <view v-if="textShow" class="uni-select__input-text" :class="{'uni-select__input-text--wrap': shouldWrap}">
+ <view class="padding-top-bottom" :class="'align-'+align">{{textShow}}</view>
+ </view>
+ <view v-else class="uni-select__input-text uni-select__input-placeholder" :class="'align-'+align">{{typePlaceholder}}</view>
+ </template>
+ <view key="clear-button" v-if="!hideRight && shouldShowClear && clear && !disabled" @click.stop="clearVal">
<uni-icons type="clear" color="#c0c4cc" size="24" />
</view>
- <view v-else>
+ <view key="arrow-button" v-else-if="!hideRight">
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
</view>
</view>
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
- <view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
- <view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
- <scroll-view scroll-y="true" class="uni-select__selector-scroll">
- <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
- <text>{{emptyTips}}</text>
- </view>
- <view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
- @click="change(item)">
- <text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
- </view>
- </scroll-view>
- </view>
+ <view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
+ <view :class="placement=='bottom'?'uni-popper__arrow_bottom':'uni-popper__arrow_top'"></view>
+ <scroll-view scroll-y="true" class="uni-select__selector-scroll">
+ <template v-if="slotEmpty && mixinDatacomResData.length === 0">
+ <view class="uni-select__selector-empty">
+ <slot name="empty" :empty="emptyTips"></slot>
+ </view>
+ </template>
+ <template v-else>
+ <view v-if="mixinDatacomResData.length === 0" class="uni-select__selector-empty">
+ <text>{{emptyTips}}</text>
+ </view>
+ </template>
+ <template v-if="slotOption">
+ <view v-for="(itemData,index) in mixinDatacomResData" :key="index" @click="change(itemData)">
+ <slot name="option" :item="itemData" :itemSelected="multiple? getCurrentValues().includes(itemData.value):getCurrentValues() == itemData.value"></slot>
+ </view>
+ </template>
+ <template v-else>
+ <view v-if="!multiple && mixinDatacomResData.length > 0" class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
+ @click="change(item)">
+ <text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
+ </view>
+ <view v-if="multiple && mixinDatacomResData.length > 0" >
+ <checkbox-group @change="checkBoxChange">
+ <label class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" >
+ <checkbox :value="index+''" :checked="getCurrentValues().includes(item.value)" :disabled="item.disable"></checkbox>
+ <view :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</view>
+ </label>
+ </checkbox-group>
+ </view>
+ </template>
+ </scroll-view>
+ </view>
</view>
</view>
</view>
@@ -36,22 +65,56 @@
* DataChecklist 鏁版嵁閫夋嫨鍣�
* @description 閫氳繃鏁版嵁娓叉煋鐨勪笅鎷夋缁勪欢
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
- * @property {String} value 榛樿鍊�
+ * @property {String|Array} value 榛樿鍊硷紝澶氶�夋椂涓烘暟缁�
* @property {Array} localdata 鏈湴鏁版嵁 锛屾牸寮� [{text:'',value:''}]
* @property {Boolean} clear 鏄惁鍙互娓呯┖宸查�夐」
* @property {Boolean} emptyText 娌℃湁鏁版嵁鏃舵樉绀虹殑鏂囧瓧 锛屾湰鍦版暟鎹棤鏁�
* @property {String} label 宸︿晶鏍囬
* @property {String} placeholder 杈撳叆妗嗙殑鎻愮ず鏂囧瓧
* @property {Boolean} disabled 鏄惁绂佺敤
+ * @property {Boolean} multiple 鏄惁澶氶�夋ā寮�
+ * @property {Boolean} wrap 鏄惁鍏佽閫変腑鏂囨湰鎹㈣鏄剧ず
* @property {String} placement 寮瑰嚭浣嶇疆
* @value top 椤堕儴寮瑰嚭
* @value bottom 搴曢儴寮瑰嚭锛坉efault)
+ * @property {String} align 閫夋嫨鏂囧瓧鐨勪綅缃�
+ * @value left 鏄剧ず宸︿晶
+ * @value center 鏄剧ず涓棿
+ * @value right 鏄剧ず 鍙充晶
+ * @property {Boolean} hideRight 鏄惁闅愯棌鍙充晶鎸夐挳
+ * @property {String} mode 杈规鏍峰紡
+ * @value default 鍥涘懆杈规
+ * @value underline 涓嬭竟妗�
+ * @value none 鏃犺竟妗�
* @event {Function} change 閫変腑鍙戠敓鍙樺寲瑙﹀彂
+ * @event {Function} open 閫夋嫨妗嗗紑鍚椂瑙﹀彂
+ * @event {Function} close 閫夋嫨妗嗗叧闂椂瑙﹀彂
+ * @event {Function} clear 鐐瑰嚮娓呴櫎鎸夐挳涔嬪悗瑙﹀彂
*/
export default {
name: "uni-data-select",
mixins: [uniCloud.mixinDatacom || {}],
+ emits: [
+ 'open',
+ 'close',
+ 'update:modelValue',
+ 'input',
+ 'clear',
+ 'change'
+ ],
+ model: {
+ prop: 'modelValue',
+ event: 'update:modelValue'
+ },
+ options: {
+ // #ifdef MP-TOUTIAO
+ virtualHost: false,
+ // #endif
+ // #ifndef MP-TOUTIAO
+ virtualHost: true
+ // #endif
+ },
props: {
localdata: {
type: Array,
@@ -60,11 +123,11 @@
}
},
value: {
- type: [String, Number],
+ type: [String, Number, Array],
default: ''
},
modelValue: {
- type: [String, Number],
+ type: [String, Number, Array],
default: ''
},
label: {
@@ -99,7 +162,27 @@
placement: {
type: String,
default: 'bottom'
- }
+ },
+ multiple: {
+ type: Boolean,
+ default: false
+ },
+ wrap: {
+ type: Boolean,
+ default: false
+ },
+ align:{
+ type: String,
+ default: "left"
+ },
+ hideRight: {
+ type: Boolean,
+ default: false
+ },
+ mode:{
+ type: String,
+ default: 'default'
+ }
},
data() {
return {
@@ -133,17 +216,35 @@
common
},
valueCom() {
- // #ifdef VUE3
- return this.modelValue;
- // #endif
- // #ifndef VUE3
- return this.value;
- // #endif
+ if (this.value === '') return this.modelValue
+ if (this.modelValue === '') return this.value
+ return this.value
},
textShow() {
// 闀挎枃鏈樉绀�
- let text = this.current;
- return text;
+ if (this.multiple) {
+ const currentValues = this.getCurrentValues();
+ if (Array.isArray(currentValues) && currentValues.length > 0) {
+ const selectedItems = this.mixinDatacomResData.filter(item => currentValues.includes(item.value));
+ return selectedItems.map(item => this.formatItemName(item)).join(', ');
+ } else {
+ return ''; // 绌烘暟缁勬椂杩斿洖绌哄瓧绗︿覆锛屾樉绀哄崰浣嶇
+ }
+ } else {
+ return this.current;
+ }
+ },
+ shouldShowClear() {
+ if (this.multiple) {
+ const currentValues = this.getCurrentValues();
+ return Array.isArray(currentValues) && currentValues.length > 0;
+ } else {
+ return !!this.current;
+ }
+ },
+ shouldWrap() {
+ // 鍙湁鍦ㄥ閫夋ā寮忋�佸紑鍚崲琛屻�佷笖鏈夊唴瀹规椂鎵嶅簲鐢ㄦ崲琛屾牱寮�
+ return this.multiple && this.wrap && !!this.textShow;
},
getOffsetByPlacement() {
switch (this.placement) {
@@ -152,10 +253,38 @@
case 'bottom':
return "top:calc(100% + 12px);";
}
+ },
+ slotSelected(){
+ // #ifdef VUE2
+ return this.$scopedSlots ? this.$scopedSlots.selected : false
+ // #endif
+ // #ifdef VUE3
+ return this.$slots ? this.$slots.selected : false
+ // #endif
+ },
+ slotEmpty(){
+ // #ifdef VUE2
+ return this.$scopedSlots ? this.$scopedSlots.empty : false
+ // #endif
+ // #ifdef VUE3
+ return this.$slots ? this.$slots.empty : false
+ // #endif
+ },
+ slotOption(){
+ // #ifdef VUE2
+ return this.$scopedSlots ? this.$scopedSlots.option : false
+ // #endif
+ // #ifdef VUE3
+ return this.$slots ? this.$slots.option : false
+ // #endif
}
},
-
watch: {
+ showSelector:{
+ handler(val,old){
+ val ? this.$emit('open') : this.$emit('close')
+ }
+ },
localdata: {
immediate: true,
handler(val, old) {
@@ -175,9 +304,20 @@
}
}
},
-
},
methods: {
+ getSelectedItems() {
+ const currentValues = this.getCurrentValues();
+ let _minxData = this.mixinDatacomResData
+ // #ifdef MP-WEIXIN || MP-TOUTIAO
+ _minxData = JSON.parse(JSON.stringify(this.mixinDatacomResData))
+ // #endif
+ if (this.multiple) {
+ return _minxData.filter(item => currentValues.includes(item.value)) || [];
+ } else {
+ return _minxData.filter(item => item.value === currentValues) || [];
+ }
+ },
debounce(fn, time = 100) {
let timer = null
return function(...args) {
@@ -185,6 +325,23 @@
timer = setTimeout(() => {
fn.apply(this, args)
}, time)
+ }
+ },
+ // 妫�鏌ラ」鐩槸鍚﹀凡閫変腑
+ isSelected(item) {
+ if (this.multiple) {
+ const currentValues = this.getCurrentValues();
+ return Array.isArray(currentValues) && currentValues.includes(item.value);
+ } else {
+ return this.getCurrentValues() === item.value;
+ }
+ },
+ // 鑾峰彇褰撳墠閫変腑鐨勫��
+ getCurrentValues() {
+ if (this.multiple) {
+ return Array.isArray(this.valueCom) ? this.valueCom : (this.valueCom ? [this.valueCom] : []);
+ } else {
+ return this.valueCom;
}
},
// 鎵ц鏁版嵁搴撴煡璇�
@@ -198,7 +355,7 @@
}
},
initDefVal() {
- let defValue = ''
+ let defValue = this.multiple ? [] : ''
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
defValue = this.valueCom
} else {
@@ -209,47 +366,105 @@
if (strogeValue || strogeValue === 0) {
defValue = strogeValue
} else {
- let defItem = ''
+ let defItem = this.multiple ? [] : ''
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
- defItem = this.mixinDatacomResData[this.defItem - 1].value
+ defItem = this.multiple ? [this.mixinDatacomResData[this.defItem - 1].value] : this.mixinDatacomResData[this.defItem - 1].value
}
defValue = defItem
}
- if (defValue || defValue === 0) {
+ if (defValue || defValue === 0 || (this.multiple && Array.isArray(defValue) && defValue.length > 0)) {
this.emit(defValue)
}
}
- const def = this.mixinDatacomResData.find(item => item.value === defValue)
- this.current = def ? this.formatItemName(def) : ''
+
+ if (this.multiple) {
+ const selectedValues = Array.isArray(defValue) ? defValue : (defValue ? [defValue] : []);
+ const selectedItems = this.mixinDatacomResData.filter(item => selectedValues.includes(item.value));
+ this.current = selectedItems.map(item => this.formatItemName(item));
+ } else {
+ const def = this.mixinDatacomResData.find(item => item.value === defValue)
+ this.current = def ? this.formatItemName(def) : ''
+ }
},
/**
- * @param {[String, Number]} value
+ * @param {[String, Number, Array]} value
* 鍒ゆ柇鐢ㄦ埛缁欑殑 value 鏄惁鍚屾椂涓虹鐢ㄧ姸鎬�
*/
isDisabled(value) {
- let isDisabled = false;
-
- this.mixinDatacomResData.forEach(item => {
- if (item.value === value) {
- isDisabled = item.disable
- }
- })
-
- return isDisabled;
+ if (Array.isArray(value)) {
+ // 瀵逛簬鏁扮粍锛屽鏋滀换鎰忎竴涓�艰绂佺敤锛屽垯璁や负鏁翠綋琚鐢�
+ return value.some(val => {
+ return this.mixinDatacomResData.some(item => item.value === val && item.disable);
+ });
+ } else {
+ let isDisabled = false;
+ this.mixinDatacomResData.forEach(item => {
+ if (item.value === value) {
+ isDisabled = item.disable
+ }
+ })
+ return isDisabled;
+ }
},
-
clearVal() {
- this.emit('')
+ const emptyValue = this.multiple ? [] : '';
+ this.emit(emptyValue)
+ this.current = this.multiple ? [] : ''
if (this.collection) {
this.removeCache()
}
+ this.$emit('clear')
+ },
+ checkBoxChange(res){
+ let range = res.detail.value
+
+ let currentValues = range && range.length > 0? range.map((item)=>{
+ const index = parseInt(item, 10);
+
+ if (isNaN(index)) {
+ console.error(`鏃犳晥绱㈠紩: ${item}`);
+ }
+
+ if (index < 0 || index >= this.mixinDatacomResData.length) {
+ console.error(`绱㈠紩瓒婄晫: ${index}`);
+ }
+
+ return this.mixinDatacomResData[index].value;
+ }) : []
+ const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
+ this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
+
+ this.emit(currentValues);
},
change(item) {
if (!item.disable) {
- this.showSelector = false
- this.current = this.formatItemName(item)
- this.emit(item.value)
+ if (this.multiple) {
+ // 澶氶�夋ā寮�
+ let currentValues = this.getCurrentValues();
+ if (!Array.isArray(currentValues)) {
+ currentValues = currentValues ? [currentValues] : [];
+ }
+
+ const itemValue = item.value;
+ const index = currentValues.indexOf(itemValue);
+
+ if (index > -1) {
+ currentValues.splice(index, 1);
+ } else {
+ currentValues.push(itemValue);
+ }
+
+ const selectedItems = this.mixinDatacomResData.filter(dataItem => currentValues.includes(dataItem.value));
+ this.current = selectedItems.map(dataItem => this.formatItemName(dataItem));
+
+ this.emit(currentValues);
+ } else {
+ // 鍗曢�夋ā寮�
+ this.showSelector = false
+ this.current = this.formatItemName(item)
+ this.emit(item.value)
+ }
}
},
emit(val) {
@@ -327,6 +542,11 @@
$uni-main-color: #333 !default;
$uni-secondary-color: #909399 !default;
$uni-border-3: #e5e5e5;
+ $uni-primary: #2979ff !default;
+ $uni-success: #4cd964 !default;
+ $uni-warning: #f0ad4e !default;
+ $uni-error: #dd524d !default;
+ $uni-info: #909399 !default;
/* #ifndef APP-NVUE */
@media screen and (max-width: 500px) {
@@ -349,6 +569,7 @@
}
.uni-stat-box {
+ background-color: #fff;
width: 100%;
flex: 1;
}
@@ -367,9 +588,16 @@
margin-right: 5px;
}
+ .border-bottom {
+ border-bottom: solid 1px $uni-border-3;
+ }
+
+ .border-default {
+ border: 1px solid $uni-border-3;
+ }
+
.uni-select {
font-size: 14px;
- border: 1px solid $uni-border-3;
box-sizing: border-box;
border-radius: 4px;
padding: 0 5px;
@@ -381,14 +609,19 @@
/* #endif */
flex-direction: row;
align-items: center;
- border-bottom: solid 1px $uni-border-3;
width: 100%;
flex: 1;
- height: 35px;
+ min-height: 35px;
&--disabled {
background-color: #f5f7fa;
cursor: not-allowed;
+ }
+
+ &--wrap {
+ height: auto;
+ min-height: 35px;
+ // align-items: flex-start;
}
}
@@ -401,7 +634,7 @@
}
.uni-select__input-box {
- height: 35px;
+ // height: 35px;
width: 0px;
position: relative;
/* #ifndef APP-NVUE */
@@ -410,6 +643,24 @@
flex: 1;
flex-direction: row;
align-items: center;
+
+ &--wrap {
+ .uni-select__input-text {
+ margin-right: 8px;
+ }
+ }
+
+ .padding-top-bottom {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ }
+
+ .slot-content {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
}
.uni-select__input {
@@ -461,15 +712,18 @@
display: flex;
cursor: pointer;
/* #endif */
+ flex-direction: row;
+ align-items: center;
line-height: 35px;
font-size: 14px;
- text-align: center;
/* border-bottom: solid 1px $uni-border-3; */
padding: 0px 10px;
}
- .uni-select__selector-item:hover {
- background-color: #f9f9f9;
+
+
+ .uni-select__selector-item-check {
+ margin-left: auto;
}
.uni-select__selector-empty:last-child,
@@ -488,15 +742,14 @@
.uni-popper__arrow_bottom,
.uni-popper__arrow_bottom::after,
.uni-popper__arrow_top,
- .uni-popper__arrow_top::after,
- {
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- border-width: 6px;
+ .uni-popper__arrow_top::after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 6px;
}
.uni-popper__arrow_bottom {
@@ -542,11 +795,22 @@
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
+
+ &--wrap {
+ white-space: normal;
+ text-overflow: initial;
+ -o-text-overflow: initial;
+ overflow: visible;
+ word-wrap: break-word;
+ word-break: break-all;
+ // line-height: 1.5;
+ }
}
.uni-select__input-placeholder {
color: $uni-base-color;
font-size: 12px;
+ margin: 1px 0;
}
.uni-select--mask {
@@ -557,4 +821,17 @@
left: 0;
z-index: 2;
}
+
+ .align-left {
+ text-align: left;
+ }
+
+ .align-center {
+ text-align: center;
+ }
+
+ .align-right {
+ text-align: right;
+ }
+
</style>
--
Gitblit v1.9.3