From 309cc3fe6303d8464951063e89fc9d623915501e Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期一, 10 三月 2025 16:23:35 +0800
Subject: [PATCH] -
---
src/uni_modules/uview-plus/components/u-picker/u-picker.vue | 127 ++++++++++++++++++++++++++++++++----------
1 files changed, 96 insertions(+), 31 deletions(-)
diff --git a/src/uni_modules/uview-plus/components/u-picker/u-picker.vue b/src/uni_modules/uview-plus/components/u-picker/u-picker.vue
index f7102cb..0a502e1 100644
--- a/src/uni_modules/uview-plus/components/u-picker/u-picker.vue
+++ b/src/uni_modules/uview-plus/components/u-picker/u-picker.vue
@@ -1,15 +1,15 @@
<template>
<view class="u-picker-warrper">
- <view v-if="hasInput" class="u-picker-input cursor-pointer" @click="showByClickInput = !showByClickInput">
- <slot>
- <view>
- {{ inputLabel && inputLabel.length ? inputLabel.join('/') : placeholder }}
- </view>
- </slot>
- </view>
+ <view v-if="hasInput" class="u-picker-input cursor-pointer" @click="onShowByClickInput">
+ <slot>
+ <up-input :disabled="disabled" :disabledColor="disabledColor" :placeholder="placeholder" :readonly="true" border="surround" v-model="inputLabel"></up-input>
+ <div class="input-cover"></div>
+ </slot>
+ </view>
<u-popup
:show="show || (hasInput && showByClickInput)"
:mode="popupMode"
+ :zIndex="zIndex"
@close="closeHandler"
>
<view class="u-picker">
@@ -20,9 +20,15 @@
:cancelText="cancelText"
:confirmText="confirmText"
:title="title"
+ :rightSlot="toolbarRightSlot ? true : false"
@cancel="cancel"
@confirm="confirm"
- ></u-toolbar>
+ >
+ <template #right>
+ <slot name="toolbar-right"></slot>
+ </template>
+ </u-toolbar>
+ <slot name="toolbar-bottom"></slot>
<picker-view
class="u-picker__view"
:indicatorStyle="`height: ${addUnit(itemHeight)}`"
@@ -41,6 +47,7 @@
<view
v-if="testArray(item)"
class="u-picker__view__column__item u-line-1"
+ :class="[index1 === innerIndex[index] && 'u-picker__view__column__item--selected']"
v-for="(item1, index1) in item"
:key="index1"
:style="{
@@ -106,6 +113,7 @@
// 涓婁竴娆＄殑鍙樺寲鍒楃储寮�
columnIndex: 0,
showByClickInput: false,
+ currentActiveValue: [] //褰撳墠鐢ㄦ埛閫変腑锛屼絾鏄繕娌＄‘璁ょ殑鍊硷紝鐢ㄦ埛娌″仛change鎿嶄綔鏃跺�欙紝鐐瑰嚮纭鍙互榛樿閫変腑绗竴涓�
}
},
watch: {
@@ -113,8 +121,13 @@
defaultIndex: {
immediate: true,
deep:true,
- handler(n) {
- this.setIndexs(n, true)
+ handler(n,o) {
+ // 淇uniapp璋冪敤瀛愮粍浠剁洿鎺�:defaultIndex="[0]"杩欐牱鍐�
+ // v-model鐨勫�煎彉鍖栨椂鍊欏鑷磀efaultIndexwatch涔熶細鎵ц鐨勯棶棰�
+ //鍗曠函vue涓嶄細鍑虹幇
+ if (!o || n.join("/") != o.join("/")) {
+ this.setIndexs(n, true)
+ }
}
},
// 鐩戝惉columns鍙傛暟鐨勫彉鍖�
@@ -126,28 +139,49 @@
}
},
},
- emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
+ emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue', 'update:show'],
computed: {
- inputLabel() {
- let items = this.innerColumns.map((item, index) => item[this.innerIndex[index]])
- let res = []
- items.forEach(element => {
- res.push(element[this.keyName])
- });
- return res
- },
- inputValue() {
- let items = this.innerColumns.map((item, index) => item[this.innerIndex[index]])
- let res = []
- items.forEach(element => {
- res.push(element['id'])
- });
- return res
- }
+ //宸查��&&宸茬‘璁ょ殑鍊兼樉绀哄湪input涓婇潰鐨勬枃妗�
+ inputLabel() {
+ let firstItem = this.innerColumns[0] && this.innerColumns[0][0];
+ // //鍖哄垎鏄笉鏄璞℃暟缁�
+ if (firstItem && Object.prototype.toString.call(firstItem) === '[object Object]') {
+ let res = this.innerColumns[0].filter(item => this.modelValue.includes(item['id']))
+ res = res.map(item => item[this.keyName]);
+ return res.join("/");
+
+ } else {
+ //鐢ㄦ埛纭畾鐨勫�硷紝鎵嶆樉绀哄埌杈撳叆妗�
+ return this.modelValue.join("/");
+ }
+ },
+ //宸查�夛紝寰呯‘璁ょ殑鍊�
+ inputValue() {
+ let items = this.innerColumns.map((item, index) => item[this.innerIndex[index]])
+ let res = []
+ //鍖哄垎鏄笉鏄璞℃暟缁�
+ if (items[0] && Object.prototype.toString.call(items[0]) === '[object Object]') {
+ //瀵硅薄鏁扮粍杩斿洖id闆嗗悎
+ items.forEach(element => {
+ res.push(element && element['id'])
+ });
+ } else {
+ //闈炲璞℃暟缁勮繑鍥炲厓绱犻泦鍚�
+ items.forEach((element, index) => {
+ res.push(element)
+ });
+ }
+ return res
+ }
},
methods: {
addUnit,
testArray: test.array,
+ onShowByClickInput(){
+ if(!this.disabled){
+ this.showByClickInput=!this.showByClickInput;
+ }
+ },
// 鑾峰彇item闇�瑕佹樉绀虹殑鏂囧瓧锛屽垽鍒负瀵硅薄杩樻槸鏂囨湰
getItemText(item) {
if (test.object(item)) {
@@ -162,6 +196,7 @@
if (this.hasInput) {
this.showByClickInput = false
}
+ this.$emit('update:show', false)
this.$emit('close')
}
},
@@ -170,14 +205,29 @@
if (this.hasInput) {
this.showByClickInput = false
}
+ this.$emit('update:show', false)
this.$emit('cancel')
},
// 鐐瑰嚮宸ュ叿鏍忕殑纭畾鎸夐挳
confirm() {
+ //濡傛灉鐢ㄦ埛鏈夋病鏈夎Е鍙戣繃change
+ if (!this.currentActiveValue.length) {
+ let arr = [0]
+ //濡傛灉鏈夐粯璁ゅ��&&榛樿鍊肩殑鏁扮粍闀垮害鏄纭殑锛屽氨鐢ㄩ粯璁ゅ��
+ if (Array.isArray(this.defaultIndex) && this.defaultIndex.length == this.innerColumns.length) {
+ arr = [...this.defaultIndex];
+ } else {
+ //鍚﹀垯榛樿閮介�変腑绗竴涓�
+ arr = Array(this.innerColumns.length).fill(0);
+ }
+ this.setLastIndex(arr)
+ this.setIndexs(arr)
+ }
this.$emit('update:modelValue', this.inputValue)
if (this.hasInput) {
this.showByClickInput = false
}
+ this.$emit('update:show', false)
this.$emit('confirm', {
indexs: this.innerIndex,
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
@@ -191,6 +241,8 @@
} = e.detail
let index = 0,
columnIndex = 0
+ //璁板綍鐢ㄦ埛閫変腑浣嗘槸杩樻病纭鐨勫��
+ this.currentActiveValue = value;
// 閫氳繃瀵规瘮鍓嶅悗涓ゆ鐨勫垪绱㈠紩锛屽緱鍑哄綋鍓嶅彉鍖栫殑鏄摢涓�鍒�
for (let i = 0; i < value.length; i++) {
let item = value[i]
@@ -207,9 +259,11 @@
// 灏嗗綋鍓嶇殑鍚勯」鍙樺寲绱㈠紩锛岃缃负"涓婁竴娆�"鐨勭储寮曞彉鍖栧��
this.setLastIndex(value)
this.setIndexs(value)
-
- this.$emit('update:modelValue', this.inputValue)
-
+ //濡傛灉鏄潪鑷甫杈撳叆妗嗘墠浼氬湪change鏃跺�欒Е鍙憊-model缁戝�肩殑鍙樺寲
+ //鍚﹀垯浼氶潪甯哥殑濂囨�紝鐢ㄦ埛鏈‘璁わ紝鍊煎氨鍙樹簡
+ if (!this.hasInput) {
+ this.$emit('update:modelValue', this.inputValue)
+ }
this.$emit('change', {
// #ifndef MP-WEIXIN || MP-LARK
// 寰俊灏忕▼搴忎笉鑳戒紶閫抰his锛屼細鍥犱负寰幆寮曠敤鑰屾姤閿�
@@ -292,7 +346,18 @@
.u-picker {
position: relative;
-
+ &-input {
+ position: relative;
+ .input-cover {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index:1;
+ }
+ }
&__view {
&__column {
--
Gitblit v1.9.1