uview-plus 3.3.61 → 3.3.62

package/changelog.md

@@ -1,3 +1,8 @@
+## 3.3.62（2025-01-10）
+feat: sleder滑动选择器双滑块增加外层触发值的变动功能
+
+fix: picker支持hasInput优化
+
 ## 3.3.61（2024-12-31）
 fix: 修复微信getSystemInfoSync接口废弃警告
 

package/components/u-cate-tab/u-cate-tab.vue

@@ -38,6 +38,7 @@
 </template>
 <script>
 	export default {
+		name: 'up-cate-tab',
         props: {
             tabList: {
                 type: Array,
@@ -262,6 +263,7 @@
 	}
 
 	.u-cate-tab__right-box {
+		flex: 1;
 		background-color: rgb(250, 250, 250);
 	}
 

package/components/u-icon/u-icon.vue

@@ -81,6 +81,16 @@
 	 */
 	export default {
 		name: 'u-icon',
+		beforeCreate() {
+			// #ifdef APP-NVUE
+			if (this.customFontFamily) {
+				domModule.addRule('fontFace', {
+					'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
+					'src': `url('${this.customFontUrl}')`
+				})
+			}
+        	// #endif
+    	},
 		data() {
 			return {
 
@@ -136,7 +146,9 @@
 			// 通过图标名，查找对应的图标
 			icon() {
 				// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
-				if (this.customPrefix !== "uicon") return "";
+				if (this.customPrefix !== "uicon") {
+					return this.customIcons[this.customPrefix + '-' + this.name] || this.name;
+				}
 				// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
 				return icons['uicon-' + this.name] || this.name
 			}

package/components/u-picker/u-picker.vue

@@ -1,12 +1,11 @@
 <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="showByClickInput = !showByClickInput">
+			<slot>
+				<up-input :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"
@@ -114,6 +113,7 @@ export default {
 			// 上一次的变化列索引
 			columnIndex: 0,
             showByClickInput: false,
+			currentActiveValue: [] //当前用户选中，但是还没确认的值，用户没做change操作时候，点击确认可以默认选中第一个
 		}
 	},
 	watch: {
@@ -121,8 +121,13 @@ export default {
 		defaultIndex: {
 			immediate: true,
 			deep:true,
-			handler(n) {
-				this.setIndexs(n, true)
+			handler(n,o) {
+				// 修复uniapp调用子组件直接:defaultIndex="[0]"这样写
+				// v-model的值变化时候导致defaultIndexwatch也会执行的问题
+				//单纯vue不会出现
+				if (!o || n.join("/") != o.join("/")) {
+					this.setIndexs(n, true)
+				}
 			}
 		},
 		// 监听columns参数的变化
@@ -136,22 +141,38 @@ export default {
 	},
 	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,
@@ -184,6 +205,19 @@ export default {
 		},
 		// 点击工具栏的确定按钮
 		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
@@ -202,6 +236,8 @@ export default {
 			} = e.detail
 			let index = 0,
 				columnIndex = 0
+			//记录用户选中但是还没确认的值
+			this.currentActiveValue = value;	
 			// 通过对比前后两次的列索引，得出当前变化的是哪一列
 			for (let i = 0; i < value.length; i++) {
 				let item = value[i]
@@ -218,9 +254,11 @@ export default {
 			// 将当前的各项变化索引，设置为"上一次"的索引变化值
 			this.setLastIndex(value)
 			this.setIndexs(value)
-
-            this.$emit('update:modelValue', this.inputValue)
-
+			//如果是非自带输入框才会在change时候触发v-model绑值的变化
+			//否则会非常的奇怪，用户未确认，值就变了
+			if (!this.hasInput) {
+				this.$emit('update:modelValue', this.inputValue)
+			}
 			this.$emit('change', {
 				// #ifndef MP-WEIXIN || MP-LARK
 				// 微信小程序不能传递this，会因为循环引用而报错
@@ -303,7 +341,18 @@ export default {
 
 	.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 {

package/components/u-search/u-search.vue

@@ -45,6 +45,7 @@
 			    class="u-search__content__input"
 			    type="text"
 			    :style="[{
+					pointerEvents: disabled ? 'none' : 'auto',
 					textAlign: inputAlign,
 					color: color,
 					backgroundColor: bgColor,

package/components/u-slider/u-slider.vue

@@ -155,8 +155,17 @@
 			value(n) {
 				// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
 				if(this.status == 'end') this.updateValue(this.value, false);
-			}
+			},
 			// #endif
+			rangeValue:{
+            	handler(n){
+					if(this.status == 'end'){
+						this.updateValue(this.rangeValue[0], false, 0);
+						this.updateValue(this.rangeValue[1], false, 1);
+					}
+            	},
+            	deep:true
+        	}
 		},
 		created() {
 		},

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。",
-	"version": "3.3.61",
+	"version": "3.3.62",
 	"description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",