uview-plus 3.3.20 → 3.3.22

package/changelog.md

@@ -1,3 +1,8 @@
+## 3.3.21（2024-08-15）
+improvement: 优化二维码组件loading及支持预览与长按事件 #351
+
+fix: 修复swipe-action自动关闭其它功能及组件卸载自动关闭
+
 ## 3.3.20（2024-08-15）
 refactor: props默认值文件移至组件文件夹内便于查找
 ## 3.3.19（2024-08-14）

package/components/u-qrcode/u-qrcode.vue

@@ -1,7 +1,17 @@
 <template>
-	<view class="u-qrcode">
-		<canvas class="u-qrcode__canvas" :id="cid" :canvas-id="cid" :style="{ width: size + unit, height: size + unit }" />
-		<image v-show="show" :src="result" :style="{ width: size + unit, height: size + unit }" />
+	<view class="u-qrcode" @longpress="longpress">
+		<view class="u-qrcode__content" @click="preview">
+			<canvas class="u-qrcode__canvas"
+				:id="cid" :canvas-id="cid" :style="{ width: size + unit, height: size + unit }" />
+			<view v-if="showLoading && loading" class="u-qrcode__loading"
+				:style="{ width: size + unit, height: size + unit }">
+				<up-loading-icon vertical :text="loadingText" textSize="14px"></up-loading-icon>
+			</view>
+			<!-- <image v-show="show" :src="result" :style="{ width: size + unit, height: size + unit }" /> -->
+		</view>
+		<!-- <up-action-sheet :actions="list" cancelText="取消"
+			v-model:show="popupShow" @select="selectClick">
+		</up-action-sheet> -->
 	</view>
 </template>
 
@@ -73,23 +83,32 @@ export default {
 		},
 		loadingText: {
 			type: String,
-			default: '二维码生成中'
+			default: '生成中'
 		},
 	},
+	emits: ['result', 'longpress'],
 	data() {
 		return {
+			loading: false,
 			result: '',
+			popupShow: false,
+			list: [
+				{
+					name: '保存二维码',
+				}
+			]
 		}
 	},
 	methods: {
 		_makeCode() {
 			let that = this
 			if (!this._empty(this.val)) {
+				this.loading = true
 				qrcode = new QRCode({
 					context: that, // 上下文环境
 					canvasId: that.cid, // canvas-id
 					usingComponents: that.usingComponents, // 是否是自定义组件
-					showLoading: that.showLoading, // 是否显示loading
+					showLoading: false, // 是否显示loading
 					loadingText: that.loadingText, // loading文字
 					text: that.val, // 生成内容
 					size: that.size, // 二维码大小
@@ -130,9 +149,42 @@ export default {
 				});
 			}
 		},
+		preview() {
+			// 预览图片
+			console.log(this.result)
+			uni.previewImage({
+				urls: [this.result],
+				longPressActions: {
+					itemList: ['保存二维码图片'],
+					success: function(data) {
+						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+						switch (data.tapIndex) {
+							case 0:
+								that._saveCode();
+								break;
+						}
+					},
+					fail: function(err) {
+						console.log(err.errMsg);
+					}
+				}
+			});
+		},
+		longpress() {
+			this.$emit('longpress', this.result)
+		},
+		selectClick(index) {
+			switch (index) {
+				case 0:
+					alert('保存二维码')
+					this._saveCode();
+					break;
+			}
+		},
 		_result(res) {
+			this.loading = false;
 			this.result = res;
-			this.$emit('result', res)
+			this.$emit('result', res);
 		},
 		_empty(v) {
 			let tp = typeof v,
@@ -187,13 +239,26 @@ export default {
 </script>
 <style lang="scss" scoped>
 .u-qrcode {
-	position: relative;
+	&__loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #f7f7f7;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+	&__content {
+		position: relative;
 
-	&__canvas {
-		position: fixed;
-		top: -99999rpx;
-		left: -99999rpx;
-		z-index: -99999;
+		&__canvas {
+			position: fixed;
+			top: -99999rpx;
+			left: -99999rpx;
+			z-index: -99999;
+		}
 	}
 }
 </style>

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

@@ -6,6 +6,11 @@ export const props = defineMixin({
         autoClose: {
             type: Boolean,
             default: () => defProps.swipeAction.autoClose
+        },
+        // 是否存在打开的按钮组
+        opendItem: {
+            type: Boolean,
+            default: false
         }
     }
 })

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

@@ -35,6 +35,7 @@
 				return [this.autoClose]
 			}
 		},
+		emits: ['opendItem:update'],
 		watch: {
 			// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
 			parentData() {
@@ -45,6 +46,11 @@
 					})
 				}
 			},
+			opendItem(val) {
+				if (val == false) {
+					this.closeAll()
+				}
+			}
 		},
 		created() {
 			this.children = []
@@ -59,6 +65,15 @@
 						}
 					})
 				}
+			},
+			closeAll() {
+				// 关闭所有单元格
+				this.children.map((item, index) => {
+					item.closeHandler()
+				})
+			},
+			setOpendItem(ins) {
+				this.$emit('opendItem:update', true)
 			}
 		}
 	}

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

@@ -14,7 +14,7 @@ export default {
 			if (this.disabled) return
 			// 打开或关闭单元格
 			if (newValue === 'close' && this.status === 'open') {
-				this.closeSwipeAction(instance, ownerInstance)
+				this.closeSwipeAction()
 			} else if(newValue === 'open' && this.status === 'close') {
 				this.openSwipeAction()
 			}
@@ -28,7 +28,13 @@ export default {
 	},
     methods: {
 		clickHandler() {
-		},
+		},
+		closeHandler() {
+			this.closeSwipeAction()
+        },
+		setStatus(status) {
+			this.status = status
+		},
 		getBtnWidth() {
 			let view = uni.createSelectorQuery().in(this).select(".u-swipe-action-item__right");
 			view.fields({
@@ -49,8 +55,9 @@ export default {
 			this.state.startX = touches[0].pageX
 			this.state.startY = touches[0].pageY
 			
-			// todo关闭其它
-			// this.$parent && this.$parent.closeOther(this)
+			// 关闭其它
+			// console.log(this.parent)
+			this.parent && this.parent.closeOther(this)
         },
         touchmove(event) {
             // console.log(event)

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

@@ -101,7 +101,7 @@
 			// #ifdef APP-NVUE
 			nvue,
 			// #endif
-			// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ || H5
+			// #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5
 			wxs,
 			// #endif
 			// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
@@ -127,8 +127,13 @@
 			// #ifndef APP-NVUE
 			wxsInit(newValue, oldValue) {
 				this.queryRect()
-			}
+			},
 			// #endif
+			status(newValue) {
+				if (newValue === 'open') {
+					this.parent && this.parent.setOpendItem(this)
+				}
+			}
 		},
 		computed: {
 			wxsInit() {
@@ -138,6 +143,9 @@
 		mounted() {
 			this.init()
 		},
+		beforeUmount() {
+			this.closeHandler()
+		},
 		methods: {
 			addUnit,
 			getPx,

package/components/u-tabs/u-tabs.vue

@@ -359,9 +359,7 @@
 					&__text {
 						font-size: 15px;
 						color: $u-content-color;
-						/* #ifndef APP-NVUE */
                         white-space: nowrap !important;
-						/* #endif */
 
 						&--disabled {
 							color: $u-disabled-color !important;

package/package.json

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