yymini-pop-bottom 1.0.2 → 1.0.4

package/README.md

@@ -16,17 +16,21 @@ or
 yarn add yymini-pop-bottom
 
 然后在 开发者工具中 构建 NPM
+```
 
-## 引用
+## 🎨 引用
 ```json
 {
   "usingComponents": {
     "pop-bottom": "/miniprogram_npm/yymini-pop-bottom/pop-bottom"
   }
 }
+```
 
-## use
+## ▶️ use
 ```ttml / wxml
 <pop-bottom visible="{{true}}" title="这里是 title" message="这里是 message" bind:close="onClose" bind:confirm="onConfirm" />
+```
 
+## 👀 示例效果
 ![弹窗示例](https://raw.githubusercontent.com/AllenGe/yy/main/pop-image.png)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "yymini-pop-bottom",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"description": "小程序（抖音、微信）-底部确认弹出框自定义组件",
 	"main": "pop-bottom.js",
 	"miniprogram": ".",

package/pop-bottom.js

@@ -14,7 +14,7 @@ Component({
 		zindex: {
 			type: Number,
 			value: 999
-		},
+		}, // 控制弹出框层级，默认999
 		title: {
 			type: String,
 			value: ''
@@ -45,20 +45,33 @@ Component({
 		}, // 是否隐藏底部按钮
 		maskCloseable: {
 			type: Boolean,
-			value: true
+			value: false
 		} // 遮罩点击是否关闭
 	},
+
 	data: {
 		show: false // 内部维护显示状态，避免异步延迟
 	},
+
 	methods: {
+		// 遮罩点击：触发关闭
+		onMaskClick() {
+			if (this.data.maskCloseable) {
+				this.triggerEvent('close', {
+					type: 'mask'
+				}); // 向父组件传事件 
+			}
+		},
+
 		// 关闭弹窗：通知页面
 		onClose() {
 			this.triggerEvent('close');
 		},
+
 		// 阻止弹窗主体点击穿透到遮罩
 		stopPropagation() {},
-		// 确认按钮：拼接业务参数透传给页面
+
+		// 确认按钮：可拼接业务参数透传给页面
 		onConfirm(e) {
 			const baseParams = e.detail || {};
 			const bizParams = {
@@ -66,7 +79,7 @@ Component({
 				...baseParams
 			};
 			this.triggerEvent('confirm', bizParams);
-			this.triggerEvent('close'); // 确认后关闭弹窗
-		}
+		},
+
 	}
 });