uview-plus 3.3.9 → 3.3.11

package/changelog.md

@@ -1,3 +1,29 @@
+## 3.3.11（2024-08-05）
+feat: 新增支持upload组件的deletable/maxCount/accept变更监听 #333
+
+feat: 新增支持tabs在swiper中使用
+
+feat: 新增FormItem支持独立设置验证规则rules
+
+fix: 修复index-list未设置$slots.header时索引高亮失效
+
+## 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元素
 

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-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,87 @@
 					// 如果为字符串，转为数组
 					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);
+								let rule = []
+								if (child.itemRules && child.itemRules.length > 0) {
+									rule = child.itemRules
+								} else {
+									rule = this.formRules[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 +231,7 @@
 						const formItemProps = this.children.map(
 							(item) => item.prop
 						);
+						// console.log(formItemProps)
 						this.validateField(formItemProps, (errors) => {
 							if(errors.length) {
 								// 如果错误提示方式为toast，则进行提示

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

@@ -13,9 +13,9 @@ export const props = defineMixin({
             default: () => defProps.formItem.prop
         },
         // 绑定的规则
-        rule: {
-            type: String,
-            default: () => defProps.formItem.rule
+        rules: {
+            type: Array,
+            default: () => defProps.formItem.rules
         },
         // 是否显示表单域的下划线边框
         borderBottom: {

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

@@ -87,12 +87,12 @@
 	 * @tutorial https://ijry.github.io/uview-plus/components/form.html
 	 * @property {String}			label			input的label提示语
 	 * @property {String}			prop			绑定的值
-	 * @property {String}			rule			绑定的规则
+	 * @property {Array}			rules			绑定的规则
 	 * @property {String | Boolean}	borderBottom	是否显示表单域的下划线边框
 	 * @property {String | Number}	labelWidth		label的宽度，单位px
 	 * @property {String}			rightIcon		右侧图标
 	 * @property {String}			leftIcon		左侧图标
-	 * @property {String | Object} leftIconStyle 左侧图标的样式
+	 * @property {String | Object} leftIconStyle    左侧图标的样式
 	 * @property {Boolean}			required		是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
 	 *
 	 * @example <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></u-form-item>
@@ -116,7 +116,8 @@
 					// 错误提示方式
 					errorType: 'message'
 				},
-				color: color
+				color: color,
+				itemRules: []
 			}
 		},
 		// 组件创建完成时，将当前实例保存到u-form中
@@ -129,6 +130,15 @@
 			this.init()
 		},
 		emits: ["click"],
+		watch: {
+			// 监听规则的变化
+			rules: {
+				immediate: true,
+				handler(n) {
+					this.setRules(n);
+				},
+			},
+		},
 		methods: {
 			addStyle,
 			addUnit,
@@ -139,6 +149,12 @@
 					error('u-form-item需要结合u-form组件使用')
 				}
 			},
+			// 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
+			setRules(rules) {
+				// 判断是否有规则
+				if (rules.length === 0) return;
+				this.itemRules = rules;
+			},
 			// 获取父组件的参数
 			updateParentData() {
 				// 此方法写在mixin中

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
@@ -434,6 +436,13 @@
 			getHeaderRect() {
 				// 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
 				return new Promise(resolve => {
+					if (!this.$slots.header) {
+						resolve({
+							width: 0,
+							height: 0
+						})
+					}
+
 					// #ifndef APP-NVUE
 					this.$uGetRect('.u-index-list__header').then(size => {
 						resolve(size)
@@ -452,7 +461,6 @@
 						resolve(res.size)
 					})
 					// #endif
-					
 				})
 			},
 			// scroll-view的滚动事件

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-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-tabs/u-tabs.vue

@@ -178,6 +178,7 @@
                 // 获取下划线的数值px表示法
 				const lineWidth = getPx(this.lineWidth);
 				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
+				console.log(lineOffsetLeft)
 				// #ifdef APP-NVUE
 				// 第一次移动滑块，无需过渡时间
 				this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
@@ -257,6 +258,12 @@
 					return
 				}
 				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+					// 兼容在swiper组件中使用
+					if (tabsRect.left > tabsRect.width) {
+						tabsRect.right = tabsRect.right - Math.floor(tabsRect.left / tabsRect.width) * tabsRect.width
+						tabsRect.left = tabsRect.left % tabsRect.width
+					}
+					// console.log(tabsRect)
 					this.tabsRect = tabsRect
 					this.scrollViewWidth = 0
 					itemRect.map((item, index) => {

package/components/u-upload/u-upload.vue

@@ -196,6 +196,15 @@
 				immediate: true,
 				deep: true,
 			},
+			deletable(newVal) {
+				this.formatFileList()
+			},
+			maxCount(newVal) {
+				this.formatFileList()
+			},
+			accept(newVal) {
+				this.formatFileList()
+			}
 		},
 		// #ifdef VUE3
 		emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview'],

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/formItem.js

@@ -12,7 +12,7 @@ export default {
     formItem: {
         label: '',
         prop: '',
-        rule: '',
+        rules: [],
         borderBottom: '',
         labelPosition: '',
         labelWidth: '',

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/package.json

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