uview-plus 3.3.8 → 3.3.10

package/changelog.md

@@ -1,3 +1,37 @@
+## 3.3.10（2024-08-02）
+fix: 修复index-list偶发的滑动最后一个索引报错top不存在
+
+fix: 修复gird在QQ、抖音小程序下布局
+
+feat: 优化step支持自定义样式prop
+
+feat: action-sheet组件支持v-model:show双向绑定
+
+fix: 小程序下steps和grid都统一采用grid布局
+
+fix: 修复支付宝小程序下input类型为数字时双向绑定失效
+
+feat : form 表单 validate 校验不通过后 error增加字段prop信息  #304
+
+fix: form组件异步校异常验问题 #393
+
+## 3.3.9（2024-08-01）
+fix: 优化获取nvue元素
+
+feat: modal新增contentTextAlign设置文案对齐方式
+
+fix: 修复NVUE下tabbar文字不显示  #458
+
+feat: loading-page增加zIndex属性
+
+fix: 相册在宽度较小时换行问题
+
+feat: album相册增加自适应自动换行模式
+
+feat: album相册增加图片尺寸单位prop
+
+fix: 修复calendar日历月份居中
+
 ## 3.3.8（2024-07-31）
 feat: slider支持进度条任意位置触发按钮拖动
 

package/components/u-action-sheet/u-action-sheet.vue

@@ -166,16 +166,18 @@
 				}
 			},
 		},
-		emits: ["close", "select"],
+		emits: ["close", "select", "update:show"],
 		methods: {
 			closeHandler() {
 				// 允许点击遮罩关闭时，才发出close事件
 				if(this.closeOnClickOverlay) {
+					this.$emit('update:show')
 					this.$emit('close')
 				}
 			},
 			// 点击取消按钮
 			cancel() {
+				this.$emit('update:show')
 				this.$emit('close')
 			},
 			selectHandler(index) {
@@ -183,6 +185,7 @@
 				if (item && !item.disabled && !item.loading) {
 					this.$emit('select', item)
 					if (this.closeOnClickAction) {
+						this.$emit('update:show')
 						this.$emit('close')
 					}
 				}

package/components/u-album/props.js

@@ -66,6 +66,16 @@ export const props = defineMixin({
         radius: {
             type: [String, Number],
             default: () => defProps.image.radius
+        },
+        // 自适应换行
+        autoWrap: {
+            type: Boolean,
+            default: () => defProps.album.autoWrap
+        },
+        // 单位
+        unit: {
+            type: [String],
+            default: () => defProps.album.unit
         }
     }
 })

package/components/u-album/u-album.vue

@@ -6,6 +6,7 @@
             v-for="(arr, index) in showUrls"
             :forComputedUse="albumWidth"
             :key="index"
+            :style="{flexWrap: autoWrap ? 'wrap' : 'nowrap'}"
         >
             <view
                 class="u-album__row__wrapper"
@@ -85,6 +86,8 @@ const dom = uni.requireNativePlugin('dom')
  * @property {Boolean}         showMore         超出maxCount时是否显示查看更多的提示 （默认 true ）
  * @property {String}          shape            图片形状，circle-圆形，square-方形 （默认 'square' ）
  * @property {String | Number} radius           圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+ * @property {Boolean}         autoWrap         自适应换行模式，不受rowCount限制，图片会自动换行 （默认 false ）
+ * @property {String}          unit             图片单位 （默认 px ）
  * @event    {Function}        albumWidth       某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送  （回调参数 width ）
  * @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album>
  */
@@ -124,42 +127,48 @@ export default {
                     marginBottom: addUnit(space)
                 }
                 // 如果为最后一行，则每个图片都无需下边框
-                if (index1 === rowLen) style.marginBottom = 0
+                if (index1 === rowLen && !this.autoWrap) style.marginBottom = 0
                 // 每行的最右边一张和总长度的最后一张无需右边框
-                if (
-                    index2 === rowCount ||
-                    (index1 === rowLen &&
-                        index2 === this.showUrls[index1 - 1].length)
-                )
-                    style.marginRight = 0
+                if (!this.autoWrap) {
+                    if (
+                        index2 === rowCount ||
+                        (index1 === rowLen &&
+                            index2 === this.showUrls[index1 - 1].length)
+                    )
+                        style.marginRight = 0
+                }
                 return style
             }
         },
         // 将数组划分为二维数组
         showUrls() {
-            const arr = []
-            this.urls.map((item, index) => {
-                // 限制最大展示数量
-                if (index + 1 <= this.maxCount) {
-                    // 计算该元素为第几个素组内
-                    const itemIndex = Math.floor(index / this.rowCount)
-                    // 判断对应的索引是否存在
-                    if (!arr[itemIndex]) {
-                        arr[itemIndex] = []
+            if (this.autoWrap) {
+                return [ this.urls.slice(0, this.maxCount) ];
+            } else {
+                const arr = []
+                this.urls.map((item, index) => {
+                    // 限制最大展示数量
+                    if (index + 1 <= this.maxCount) {
+                        // 计算该元素为第几个素组内
+                        const itemIndex = Math.floor(index / this.rowCount)
+                        // 判断对应的索引是否存在
+                        if (!arr[itemIndex]) {
+                            arr[itemIndex] = []
+                        }
+                        arr[itemIndex].push(item)
                     }
-                    arr[itemIndex].push(item)
-                }
-            })
-            return arr
+                })
+                return arr
+            }
         },
         imageWidth() {
             return addUnit(
-                this.urls.length === 1 ? this.singleWidth : this.multipleSize
+                this.urls.length === 1 ? this.singleWidth : this.multipleSize, this.unit
             )
         },
         imageHeight() {
             return addUnit(
-                this.urls.length === 1 ? this.singleHeight : this.multipleSize
+                this.urls.length === 1 ? this.singleHeight : this.multipleSize, this.unit
             )
         },
         // 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
@@ -248,7 +257,6 @@ export default {
 
     &__row {
         @include flex(row);
-        flex-wrap: wrap;
 
         &__wrapper {
             position: relative;

package/components/u-calendar/month.vue

@@ -469,6 +469,7 @@
 
 		&__title {
 			display: flex;
+			flex-direction: column;
 			font-size: 14px;
 			line-height: 42px;
 			height: 42px;

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

@@ -2,6 +2,7 @@
     <view v-if="hasInput" class="u-datetime-picker">
         <u-input
             :placeholder="placeholder"
+			:readonly="!!showByClickInput"
             border="surround"
             v-model="inputValue"
             @click="showByClickInput = !showByClickInput"

package/components/u-form/u-form.vue

@@ -134,54 +134,82 @@
 					// 如果为字符串，转为数组
 					value = [].concat(value);
 					// 历遍children所有子form-item
-					this.children.map((child) => {
-						// 用于存放form-item的错误信息
-						const childErrors = [];
-						if (value.includes(child.prop)) {
-							// 获取对应的属性，通过类似'a.b.c'的形式
-							const propertyVal = getProperty(
-								this.model,
-								child.prop
-							);
-							// 属性链数组
-							const propertyChain = child.prop.split(".");
-							const propertyName =
-								propertyChain[propertyChain.length - 1];
+					let promises = this.children.map(child => {
+						return new Promise((resolve, reject) => {
+							// 用于存放form-item的错误信息
+							const childErrors = [];
+							if (value.includes(child.prop)) {
+								// 获取对应的属性，通过类似'a.b.c'的形式
+								const propertyVal = getProperty(
+									this.model,
+									child.prop
+								);
+								// 属性链数组
+								const propertyChain = child.prop.split(".");
+								const propertyName =
+									propertyChain[propertyChain.length - 1];
 
-							const rule = this.formRules[child.rule || child.prop];
-							// 如果不存在对应的规则，直接返回，否则校验器会报错
-							if (!rule) return;
-							// rule规则可为数组形式，也可为对象形式，此处拼接成为数组
-							const rules = [].concat(rule);
+								const rule = this.formRules[child.rule || child.prop];
+								// 如果不存在对应的规则，直接返回，否则校验器会报错
+								if (!rule) {
+									resolve()
+									return;
+								}
+								// rule规则可为数组形式，也可为对象形式，此处拼接成为数组
+								const rules = [].concat(rule);
 
-							// 对rules数组进行校验
-							for (let i = 0; i < rules.length; i++) {
-								const ruleItem = rules[i];
-								// 将u-form-item的触发器转为数组形式
-								const trigger = [].concat(ruleItem?.trigger);
-								// 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
-								if (event && !trigger.includes(event)) continue;
-								// 实例化校验对象，传入构造规则
-								const validator = new Schema({
-									[propertyName]: ruleItem,
-								});
-								validator.validate({
+								// 对rules数组进行校验
+								if (!rules.length) {
+									resolve()
+								}
+								for (let i = 0; i < rules.length; i++) {
+									const ruleItem = rules[i];
+									// 将u-form-item的触发器转为数组形式
+									const trigger = [].concat(ruleItem?.trigger);
+									// 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
+									if (event && !trigger.includes(event)) {
+										resolve()
+										continue;
+									}
+									// 实例化校验对象，传入构造规则
+									const validator = new Schema({
+										[propertyName]: ruleItem,
+									});
+									validator.validate({
 										[propertyName]: propertyVal,
 									},
-									(errors, fields) => {
-										if (test.array(errors)) {
-											errorsRes.push(...errors);
-											childErrors.push(...errors);
+										(errors, fields) => {
+											if (test.array(errors)) {
+												errors.forEach(element => {
+													element.prop = child.prop;
+												});
+												errorsRes.push(...errors);
+												childErrors.push(...errors);
+											}
+											child.message =
+												childErrors[0]?.message ? childErrors[0].message : null;
+
+											if (i == (rules.length - 1)) {
+												resolve(errorsRes)
+											}
 										}
-										child.message =
-											childErrors[0]?.message ? childErrors[0].message : null;
-									}
-								);
+									)
+								}
+							} else {
+								resolve({})
 							}
-						}
+						});
 					});
-					// 执行回调函数
-					typeof callback === "function" && callback(errorsRes);
+
+					// 使用Promise.all来等待所有Promise完成  
+					Promise.all(promises)
+						.then(results => {
+							// 执行回调函数
+							typeof callback === "function" && callback(errorsRes);
+						})
+						.catch(error => {
+							console.error('An error occurred:', error);
+						});
 				});
 			},
 			// 校验全部数据
@@ -198,6 +226,7 @@
 						const formItemProps = this.children.map(
 							(item) => item.prop
 						);
+						// console.log(formItemProps)
 						this.validateField(formItemProps, (errors) => {
 							if(errors.length) {
 								// 如果错误提示方式为toast，则进行提示

package/components/u-grid/u-grid.vue

@@ -105,7 +105,7 @@
 		align-items: center;
 		// 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
 		// 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
-		/* #ifdef MP-TOUTIAO */
+		/* #ifdef MP */
 		display: grid;
 		grid-template-columns: repeat(v-bind(col), 1fr);
 		/* #endif */

package/components/u-grid-item/u-grid-item.vue

@@ -82,7 +82,12 @@
 			itemStyle() {
 				const style = {
 					background: this.bgColor,
+					// #ifndef MP
 					width: this.width
+					// #endif
+					// #ifdef MP
+					width: '100%'
+					// #endif
 				}
 				return deepMerge(style, addStyle(this.customStyle))
 			}

package/components/u-index-list/u-index-list.vue

@@ -361,16 +361,16 @@
 				// pageY += sys().windowTop
 				// #endif
 				// 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
-				// console.log('top1', top)
-				// console.log('height', height)
+				console.log('top1', top)
+				console.log('height', height)
 				top = top - (height / 2) // 减去transfrom的translateY值导致的高度
 				pageY = pageY - this.topOffset
 				// if (this.safeBottomFix) {
 				// 	pageY = pageY + 34
 				// }
-				// console.log('topOffset', this.topOffset)
-				// console.log('pageY', pageY)
-				// console.log('top2', top)
+				console.log('topOffset', this.topOffset)
+				console.log('pageY', pageY)
+				console.log('top2', top)
 				if (pageY < top) {
 					index = 0
 				} else if (pageY >= top + height) {
@@ -418,7 +418,9 @@
 					return child
 				})
 				// console.log('this.children[currentIndex].top', children[currentIndex].top)
-				this.scrollTop = children[currentIndex].top - getPx(customNavHeight)
+				if (children[currentIndex]?.top) {
+					this.scrollTop = children[currentIndex].top - getPx(customNavHeight)
+				}
 				// #endif
 
 				// #ifdef APP-NVUE
@@ -441,7 +443,14 @@
 					// #endif
 
 					// #ifdef APP-NVUE
-					dom.getComponentRect(this.$refs.header, res => {
+					let headerRef = this.$refs.header
+					if (!headerRef) {
+						resolve({
+							width: 0,
+							height: 0
+						})
+					}
+					dom.getComponentRect(headerRef, res => {
 						resolve(res.size)
 					})
 					// #endif

package/components/u-input/u-input.vue

@@ -91,7 +91,7 @@ import { addStyle, addUnit, deepMerge, formValidate, $parent, sleep, os } from '
  * @property {String}			disabledColor			禁用状态时的背景色（ 默认 '#f5f7fa' ）
  * @property {Boolean}			clearable				是否显示清除控件 （ 默认 false ）
  * @property {Boolean}			password				是否密码类型 （ 默认 false ）
- * @property {String | Number}	maxlength				最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
+ * @property {Number}       	maxlength				最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
  * @property {String}			placeholder				输入框为空时的占位符
  * @property {String}			placeholderClass		指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ （ 默认 'input-placeholder' ）
  * @property {String | Object}	placeholderStyle		指定placeholder的样式，字符串/对象形式，如"color: red;"
@@ -102,7 +102,7 @@ import { addStyle, addUnit, deepMerge, formValidate, $parent, sleep, os } from '
  * @property {Boolean}			focus					自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
  * @property {Boolean}			autoBlur				键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
  * @property {Boolean}			disableDefaultPadding	是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 （ 默认 false ）
- * @property {String ｜ Number}	cursor					指定focus时光标的位置（ 默认 -1 ）
+ * @property {String ｜ Number}	cursor					指定focus时光标的位置（ 默认 140 ）
  * @property {String ｜ Number}	cursorSpacing			输入框聚焦时底部与键盘的距离 （ 默认 30 ）
  * @property {String ｜ Number}	selectionStart			光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
  * @property {String ｜ Number}	selectionEnd			光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
@@ -234,6 +234,7 @@ export default {
         onInput(e) {
             let { value = "" } = e.detail || {};
             // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+            // console.log('onInput', value, this.innerValue)
             this.innerValue = value;
             this.$nextTick(() => {
                 let formatValue = this.innerFormatter(value);

package/components/u-loading-page/props.js

@@ -47,6 +47,11 @@ export const props = defineMixin({
         loadingColor: {
             type: String,
             default: () => defProps.loadingPage.loadingColor
-        }
+        },
+        // 层级
+        zIndex: {
+            type: [Number],
+            default: () => defProps.loadingPage.zIndex
+        },
     }
 })

package/components/u-loading-page/u-loading-page.vue

@@ -9,6 +9,8 @@
             bottom: 0,
             backgroundColor: bgColor,
             display: 'flex',
+            zIndex: zIndex,
+            ...customStyle
         }"
     >
         <view class="u-loading-page">
@@ -64,6 +66,7 @@ import { addUnit } from '../../libs/function/index';
  * @property {String | Number}	fontSize		文字大小 （默认 19 ）
  * @property {String | Number}	iconSize		图标大小 （默认 28 ）
  * @property {String}			loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
+ * @property {Number}			zIndex	        z-index层级 （默认10 ）
  * @property {Object}			customStyle		自定义样式
  * @example <u-loading mode="circle"></u-loading>
  */

package/components/u-modal/props.js

@@ -81,6 +81,11 @@ export const props = defineMixin({
         confirmButtonShape: {
             type: String,
             default: () => defProps.modal.confirmButtonShape
-        }
+        },
+        // 文案对齐方式
+        contentTextAlign: {
+            type: String,
+            default: () => defProps.modal.contentTextAlign
+        },
     }
 })

package/components/u-modal/u-modal.vue

@@ -31,7 +31,9 @@
 				}"
 			>
 				<slot>
-					<text class="u-modal__content__text">{{ content }}</text>
+					<text class="u-modal__content__text" :style="{textAlign: contentTextAlign}">
+						{{ content }}
+					</text>
 				</slot>
 			</view>
 			<view

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

@@ -22,6 +22,7 @@
 				>
 				</view>
 				<view
+					@click="onClick"
 					class="u-slider__gap"
 					:style="[
 						barStyle,

package/components/u-steps/u-steps.vue

@@ -61,6 +61,9 @@
 		},
 		created() {
 			this.children = []
+		},
+		options: {
+			virtualHost: false
 		}
 	}
 </script>
@@ -78,6 +81,10 @@
 		&--row {
 			flex-direction: row;
 			flex: 1;
+			/* #ifdef MP */
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+			/* #endif */
 		}
 	}
 </style>

package/components/u-steps-item/props.js

@@ -21,6 +21,11 @@ export const props = defineMixin({
         error: {
             type: Boolean,
             default: () => defProps.stepsItem.error
-        }
+        },
+        // 自定义样式
+        itemStyle: {
+            type: [Object],
+            default: {}
+        },
     }
 })

package/components/u-steps-item/u-steps-item.vue

@@ -3,7 +3,8 @@
 		<view class="u-steps-item__line" v-if="index + 1 < childLength"
 			:class="[`u-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
 		<view class="u-steps-item__wrapper"
-			:class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]">
+			:class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]"
+			:style="[itemStyle]">
 			<slot name="icon">
 				<view class="u-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
 						backgroundColor: statusColor
@@ -95,6 +96,11 @@
 		created() {
 			this.init()
 		},
+		// #ifdef MP-TOUTIAO
+		options: {
+			virtualHost: false
+		},
+		// #endif
 		computed: {
 			lineStyle() {
 				const style = {}
@@ -111,6 +117,11 @@
 					.current ? this.parentData.activeColor : this.parentData.inactiveColor
 				return style
 			},
+			itemStyle() {
+				return {
+					...this.itemStyle
+				}
+			},
 			statusClass() {
 				const {
 					index,
@@ -231,10 +242,11 @@
 			align-items: center;
 			position: relative;
 			background-color: #fff;
+			border-radius: 50px;
 
 			&--column {
 				width: 20px;
-				height: 32px;
+				height: 20px;
 
 				&--dot {
 					height: 20px;
@@ -243,7 +255,7 @@
 			}
 
 			&--row {
-				width: 32px;
+				width: 20px;
 				height: 20px;
 
 				&--dot {

package/components/u-tabbar-item/u-tabbar-item.vue

@@ -127,10 +127,9 @@
 		justify-content: center;
 		flex: 1;
 		/* #ifndef APP-NVUE */
-		
-		/* #endif */
 		width: 100%;
 		height: 100%;
+		/* #endif */
 		/* #ifdef H5 */
 		cursor: pointer;
 		/* #endif */

package/components/u-waterfall/u-waterfall.vue

@@ -226,6 +226,8 @@
     }
 
     .u-image {
+        /* #ifndef APP-NVUE */
         max-width: 100%;
+        /* #endif */
     }
 </style>

package/libs/config/props/album.js

@@ -20,6 +20,8 @@ export default {
         maxCount: 9,
         previewFullImage: true,
         rowCount: 3,
-        showMore: true
+        showMore: true,
+        autoWrap: false,
+        unit: 'px'
     }
 }

package/libs/config/props/input.js

@@ -17,7 +17,7 @@ export default {
 		disabledColor: '#f5f7fa',
 		clearable: false,
 		password: false,
-		maxlength: -1,
+		maxlength: 140,
 		placeholder: null,
 		placeholderClass: 'input-placeholder',
 		placeholderStyle: 'color: #c0c4cc',

package/libs/config/props/loadingPage.js

@@ -18,6 +18,7 @@ export default {
         color: '#C8C8C8',
         fontSize: 19,
         iconSize: 28,
-        loadingColor: '#C8C8C8'
+        loadingColor: '#C8C8C8',
+        zIndex: 10
     }
 }

package/libs/config/props/modal.js

@@ -25,6 +25,7 @@ export default {
         closeOnClickOverlay: false,
         negativeTop: 0,
         width: '650rpx',
-        confirmButtonShape: ''
+        confirmButtonShape: '',
+        contentTextAlign: 'left'
     }
 }

package/libs/mixin/mixin.js

@@ -130,8 +130,15 @@ export const mixin = defineMixin({
                     let selectorNvue = selector.substring(1) // 去掉开头的#或者.
                     let selectorRef = this.$refs[selectorNvue]
                     if (!selectorRef) {
-                        console.log('不存在元素，请检查是否设置了ref属性' + selectorNvue + '。')
-                        resolve({}) 
+                        // console.log('不存在元素，请检查是否设置了ref属性' + selectorNvue + '。')
+                        resolve({
+                            with: 0,
+                            height: 0,
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            bottom: 0
+                        }) 
                     }
                     dom.getComponentRect(selectorRef, res => {
                         // console.log(res)

package/package.json

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