uview-plus 3.3.34 → 3.3.35

package/changelog.md

@@ -1,3 +1,11 @@
+## 3.3.35（2024-10-08）
+feat: modal和picker支持v-model:show双向绑定
+
+feat: 支持checkbox使用slot自定义label后自带点击事件 #522
+
+feat: swipe-action支持自动关闭特性及初始化打开状态
+
+
 ## 3.3.34（2024-09-23）
 feat: 支持toast设置duration值为-1时不自动关闭
 

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

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

package/components/u-checkbox/u-checkbox.vue

@@ -20,16 +20,17 @@
 				/>
 			</slot>
 		</view>
-		<slot name="label" :label="label" :elDisabled="elDisabled">
-			<text
-				@tap.stop="labelClickHandler"
-				:style="{
-					color: elDisabled ? elInactiveColor : elLabelColor,
-					fontSize: elLabelSize,
-					lineHeight: elLabelSize
-				}"
-			>{{label}}</text>
-		</slot>
+		<view class="u-checkbox__label-wrap cursor-pointer" @tap.stop="labelClickHandler">
+			<slot name="label" :label="label" :elDisabled="elDisabled">
+				<text
+					:style="{
+						color: elDisabled ? elInactiveColor : elLabelColor,
+						fontSize: elLabelSize,
+						lineHeight: elLabelSize
+					}"
+				>{{label}}</text>
+			</slot>
+		</view>
 	</view>
 </template>
 

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

@@ -120,7 +120,7 @@
 	 * @event {Function} confirm	点击确认按钮时触发
 	 * @event {Function} cancel		点击取消按钮时触发
 	 * @event {Function} close		点击遮罩关闭出发，closeOnClickOverlay为true有效
-	 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+	 * @example <u-modal :show="show" />
 	 */
 	export default {
 		name: 'u-modal',
@@ -137,7 +137,7 @@
 				if (n && this.loading) this.loading = false
 			}
 		},
-		emits: ["confirm", "cancel", "close"],
+		emits: ["confirm", "cancel", "close", "update:show"],
 		methods: {
 			addUnit,
 			// 点击确定按钮
@@ -145,11 +145,14 @@
 				// 如果配置了异步关闭，将按钮值为loading状态
 				if (this.asyncClose) {
 					this.loading = true;
+				} else {
+					this.$emit('update:show', false)
 				}
 				this.$emit('confirm')
 			},
 			// 点击取消按钮
 			cancelHandler() {
+				this.$emit('update:show', false)
 				this.$emit('cancel')
 			},
 			// 点击遮罩
@@ -159,6 +162,7 @@
 			// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
 			clickHandler() {
 				if (this.closeOnClickOverlay) {
+					this.$emit('update:show', false)
 					this.$emit('close')
 				}
 			}

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

@@ -132,7 +132,7 @@ export default {
 			}
 		},
 	},
-	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]])
@@ -168,6 +168,7 @@ export default {
                 if (this.hasInput) {
                     this.showByClickInput = false
                 }
+				this.$emit('update:show', false)
 				this.$emit('close')
 			}
 		},
@@ -176,6 +177,7 @@ export default {
             if (this.hasInput) {
                 this.showByClickInput = false
             }
+			this.$emit('update:show', false)
 			this.$emit('cancel')
 		},
 		// 点击工具栏的确定按钮
@@ -184,6 +186,7 @@ export default {
             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]]),

package/components/u-popup/u-popup.vue

@@ -72,7 +72,7 @@
 	 * @property {Object}			customStyle			组件的样式，对象形式
 	 * @event {Function} open 弹出层打开
 	 * @event {Function} close 弹出层收起
-	 * @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
+	 * @example <u-popup v-model:show="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
 	 */
 	export default {
 		name: 'u-popup',

package/components/u-swipe-action-item/index.wxs

@@ -9,7 +9,7 @@ function touchstart(event, ownerInstance) {
 	var instance = event.instance
 	// wxs内的局部变量快照，此快照是属于整个组件的，在touchstart和touchmove事件中都能获取到相同的结果
 	var state = instance.getState()
-	if (state.disabled) return
+	if (state.disabled) return
 	var touches = event.touches
 	// 如果进行的是多指触控，不允许进行操作
 	if (touches && touches.length > 1) return
@@ -17,8 +17,8 @@ function touchstart(event, ownerInstance) {
 	state.moving = true
 	// 记录触摸开始点的坐标值
 	state.startX = touches[0].pageX
-	state.startY = touches[0].pageY
-	
+	state.startY = touches[0].pageY
+	
 	ownerInstance.callMethod('closeOther')
 }
 
@@ -70,7 +70,7 @@ function touchend(event, ownerInstance) {
 	var instance = event.instance
 	// wxs内的局部变量快照
 	var state = instance.getState()
-	if (!state.moving || state.disabled) return
+	if (!state.moving || state.disabled) return
 	var touches = event.changedTouches ? event.changedTouches[0] : {}
 	var pageX = touches.pageX
 	var pageY = touches.pageY
@@ -185,10 +185,10 @@ function closeSwipeAction(instance, ownerInstance) {
 
 // status的状态发生变化
 function statusChange(newValue, oldValue, ownerInstance, instance) {
-	var state = instance.getState()
-	if (state.disabled) return
+	var state = instance.getState()
+	if (state.disabled) return
 	// 打开或关闭单元格
-	if (newValue === 'close' && state.status === 'open') {
+	if (newValue === 'close' && state.status === 'open') {
 		closeSwipeAction(instance, ownerInstance)
 	} else if(newValue === 'open' && state.status === 'close') {
 		openSwipeAction(instance, ownerInstance)
@@ -198,18 +198,18 @@ function statusChange(newValue, oldValue, ownerInstance, instance) {
 // 菜单尺寸发生变化
 function sizeChange(newValue, oldValue, ownerInstance, instance) {
 	// wxs内的局部变量快照
-	var state = instance.getState()
-	// 临时防止nv_disabled报错
-	if (!state || !newValue) {
-		return;
-	}
+	var state = instance.getState()
+	// 临时防止nv_disabled报错
+	if (!state || !newValue) {
+		return;
+	}
 	state.disabled = newValue.disabled
 	state.duration = newValue.duration
 	state.show = newValue.show
 	state.threshold = newValue.threshold
 	state.buttons = newValue.buttons
 
-	if (state.buttons) {
+	if (state.buttons) {
 		var len = state.buttons.length
 		var buttonsWidth = 0
 		var buttons = newValue.buttons
@@ -217,7 +217,12 @@ function sizeChange(newValue, oldValue, ownerInstance, instance) {
 			buttonsWidth += buttons[i].width
 		}
 	}
-	state.buttonsWidth = buttonsWidth
+	state.buttonsWidth = buttonsWidth
+
+	// 支持默认打开
+	if (state.show) {
+		openSwipeAction(instance, ownerInstance)
+	}
 }
 
 module.exports = {
@@ -226,4 +231,4 @@ module.exports = {
 	touchend: touchend,
 	sizeChange: sizeChange,
 	statusChange: statusChange
-}
+}

package/components/u-swipe-action-item/props.js

@@ -7,6 +7,10 @@ export const props = defineMixin({
             type: Boolean,
             default: () => defProps.swipeActionItem.show
         },
+        closeOnClick: {
+            type: Boolean,
+            default: () => defProps.swipeActionItem.closeOnClick
+        },
         // 标识符，如果是v-for，可用index索引值
         name: {
             type: [String, Number],

package/components/u-swipe-action-item/swipeActionItem.js

@@ -11,6 +11,7 @@ export default {
     // swipeActionItem 组件
     swipeActionItem: {
         show: false,
+        closeOnClick: true,
         name: '',
         disabled: false,
         threshold: 20,

package/components/u-swipe-action-item/u-swipe-action-item.vue

@@ -90,8 +90,7 @@
 	 */
 	export default {
 		name: 'u-swipe-action-item',
-		emits: ['click'],
-		
+		emits: ['click', 'update:show'],
 		mixins: [
 			mpMixin,
 			mixin,
@@ -118,7 +117,7 @@
 					autoClose: true,
 				},
 				// 当前状态，open-打开，close-关闭
-				status: 'close',
+				status: '',
 				sliderStyle: {}
 			}
 		},
@@ -131,7 +130,17 @@
 			// #endif
 			status(newValue) {
 				if (newValue === 'open') {
+					this.$emit('update:show', true)
 					this.parent && this.parent.setOpendItem(this)
+				} else {
+					this.$emit('update:show', false)
+				}
+			},
+			show(newValue) {
+				if (newValue) {
+					this.status = 'open'
+				} else {
+					this.status = 'close'
 				}
 			}
 		},
@@ -178,10 +187,14 @@
 			// #endif
 			// 按钮被点击
 			buttonClickHandler(item, index) {
-				this.$emit('click', {
+				let ret = this.$emit('click', {
 					index,
 					name: this.name
+				}, () => {
 				})
+				if (this.closeOnClick) {
+					this.closeHandler()
+				}
 			}
 		},
 	}

package/components/u-text/u-text.vue

@@ -22,8 +22,9 @@
             ></u-icon>
         </view>
         <u-link
-            v-if="mode === 'link'"			class="u-text__value"
-            :style="{fontWeight: valueStyle.fontWeight, wordWrap: valueStyle.wordWrap, fontSize: valueStyle.fontSize}"			:class="[			    type && `u-text__value--${type}`,			    lines && `u-line-${lines}`			]"			:text="value"
+            v-if="mode === 'link'" class="u-text__value"
+            :style="{fontWeight: valueStyle.fontWeight, wordWrap: valueStyle.wordWrap, fontSize: valueStyle.fontSize}"
+            :class="[type && `u-text__value--${type}`,lines && `u-line-${lines}`]" :text="value"
             :href="href"
             underLine
         ></u-link>

package/package.json

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