yy-dymini-pop-bottom 1.0.0

package/README.md

@@ -0,0 +1,28 @@
+# yy-dymini-pop-center
+抖音小程序轻量级居中确认弹出框自定义组件，无需额外依赖，开箱即用。
+
+## 🌟 特性
+- 原生小程序语法，兼容所有抖音小程序基础库
+- 支持自定义标题、内容
+- 提供确认/取消回调，支持遮罩关闭
+- 样式简洁美观，可自定义修改
+
+## 📦 安装
+在你的抖音小程序项目根目录执行：
+
+```bash
+npm install yy-dymini-pop-center --save
+or
+yarn add yy-dymini-pop-center
+
+
+## 抖音小程序（必读）
+- 抖音小程序目前不支持通过 npm 包目录直接引用组件，
+- 必须显式指向组件文件路径。
+
+```json
+{
+  "usingComponents": {
+    "pop-center-confirm": "/miniprogram_npm/yy-dymini-pop-center/pop-center-confirm"
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "yy-dymini-pop-bottom",
+	"version": "1.0.0",
+	"description": "抖音小程序-底部确认弹出框自定义组件",
+	"main": "pop-bottom-confirm.js",
+	"miniprogram": ".",
+	"keywords": [
+		"douyin",
+		"miniProgram",
+		"抖音小程序",
+		"confirm",
+		"modal",
+		"弹出框"
+	],
+	"author": "Allen.ge <gyjshow@163.com>",
+	"license": "MIT",
+	"repository": {
+		"type": "",
+		"url": ""
+	},
+	"bugs": {
+		"url": ""
+	},
+	"homepage": "",
+	"private": false,
+	"files": [
+		"pop-bottom-confirm.js",
+		"pop-bottom-confirm.json",
+		"pop-bottom-confirm.ttml",
+		"pop-bottom-confirm.ttss",
+		"README.md"
+	],
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	}
+}

package/pop-bottom-confirm.js

@@ -0,0 +1,70 @@
+//底部操作 确认弹窗
+Component({
+	properties: {
+		visible: { // 控制显示/隐藏
+			type: Boolean,
+			value: false,
+			observer(newVal) {
+				// 同步控制动画类，避免异步延迟
+				this.setData({
+					show: newVal
+				});
+			}
+		},
+		zindex: {
+			type: Number,
+			value: 999
+		},
+		title: {
+			type: String,
+			value: ''
+		}, // 弹窗标题
+		message: {
+			type: String,
+			value: ''
+		}, // 弹窗内容
+		cancelText: {
+			type: String,
+			value: '取消'
+		}, // 取消按钮文本
+		confirmText: {
+			type: String,
+			value: '确认'
+		}, // 确认按钮文本
+		showClose: {
+			type: Boolean,
+			value: true
+		}, // 是否显示关闭按钮
+		showCancel: {
+			type: Boolean,
+			value: true
+		}, // 是否显示取消按钮
+		hideFooter: {
+			type: Boolean,
+			value: false
+		}, // 是否隐藏底部按钮
+		maskCloseable: {
+			type: Boolean,
+			value: true
+		} // 遮罩点击是否关闭
+	},
+	data: {
+		show: false // 内部维护显示状态，避免异步延迟
+	},
+	methods: {
+		// 关闭弹窗：通知页面
+		onClose() {
+			this.triggerEvent('close');
+		},
+		// 确认按钮：拼接业务参数透传给页面
+		onConfirm(e) {
+			const baseParams = e.detail || {};
+			const bizParams = {
+				message: this.data.message,
+				...baseParams
+			};
+			this.triggerEvent('confirm', bizParams);
+			this.triggerEvent('close'); // 确认后关闭弹窗
+		}
+	}
+});

package/pop-bottom-confirm.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/pop-bottom-confirm.ttml

@@ -0,0 +1,19 @@
+<!-- 遮罩层：全屏，控制显示/隐藏 -->
+<view class="view-mask {{visible ? 'show' : ''}}" style="z-index: {{zindex}};" bindtap="onMaskClick">
+	<!-- 弹窗主体：固定在底部，宽度100% -->
+	<view class="view-content" catchtap="stopPropagation">
+		<!-- 标题区：可选 -->
+		<view class="popup-title">
+			{{title}}
+		</view>
+		<view tt:if="{{showClose}}" class="popup-close" bindtap="onClose">×</view>
+		<!-- 内容 -->
+		<view class="popup-msg">{{message}}</view>
+
+		<!-- 底部按钮区：可选 -->
+		<view class="popup-footer" tt:if="{{!hideFooter}}">
+			<button class="btn cancel" bindtap="onClose" tt:if="{{showCancel}}">{{cancelText}}</button>
+			<button class="btn confirm" bindtap="onConfirm">{{confirmText}}</button>
+		</view>
+	</view>
+</view>

package/pop-bottom-confirm.ttss

@@ -0,0 +1,142 @@
+/* 遮罩层：全屏、透明、不可点击（初始状态） */
+.view-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.45);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.3s ease;
+	/* z-index: 999; */
+	/* z-index层级值 调用的时候传入，默认是999; */
+}
+
+/* 遮罩显示：不透明+可点击 */
+.view-mask.show {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+/* 弹窗主体：固定底部，初始滑出屏幕 */
+.view-content {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+
+	background: #ffffff;
+
+	border-top-left-radius: 30rpx;
+	border-top-right-radius: 30rpx;
+
+	padding: 40rpx 40rpx 80rpx;
+	box-sizing: border-box;
+	/* 初始状态：滑出屏幕底部 */
+	transform: translateY(100%);
+	transition: transform 0.3s ease-out;
+	/* 滑动动画更丝滑 */
+	min-height: 200rpx;
+	/* 固定最小高度，适配内容 */
+	height: auto;
+	/* 自适应内容高度 */
+}
+
+/* 弹窗显示：滑入屏幕 */
+.view-mask.show .view-content {
+	transform: translateY(0);
+}
+
+/* 通用样式：适配抖音规范 */
+.popup-title {
+	font-size: 32rpx;
+	font-weight: 600;
+	text-align: center;
+	margin-bottom: 20rpx;
+	position: relative;
+	/* 关闭按钮定位 */
+}
+
+.popup-msg {
+	font-size: 32rpx;
+	color: #232832;
+	text-align: center;
+	margin: 60rpx 0;
+
+	/* background-color: #333333; */
+}
+
+
+.popup-close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	font-size: 36rpx;
+	color: #999;
+	/* background-color: #232832; */
+	padding: 20rpx 30rpx 30rpx 60rpx
+}
+
+.popup-footer {
+	display: flex;
+	margin-top: 100rpx;
+	gap: 60rpx;
+}
+
+
+
+/* 核心重置：只解决伪元素遮挡+原生外观问题（必写） */
+button {
+	-webkit-appearance: none !important;
+	/* 去掉原生外观（关键） */
+	appearance: none !important;
+	border: none !important;
+	/* 清空默认边框 */
+}
+
+button::after {
+	content: none !important;
+	/* 直接移除遮挡的伪元素（核心） */
+}
+
+.btn {
+	flex: 1;
+	height: 80rpx;
+	line-height: 80rpx;
+	border-radius: 40rpx;
+	border: none;
+	font-size: 30rpx;
+	padding: 0;
+}
+
+.cancel {
+	background: #FFFFFF;
+	color: #333333;
+	border: 2rpx solid #D1D1D6 !important;
+	/* transition: background-color 0.1s; */
+
+	/* box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  transition: box-shadow 0.1s; */
+	/* 按压 */
+}
+
+.cancel:active {
+	background-color: #f5f5f5;
+
+	/* box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.2); */
+	/* 按压 */
+}
+
+.confirm {
+	background: linear-gradient(180deg, #FF8684 0%, #CB6DF3 100%);
+	color: #ffffff;
+	font-weight: 600;
+
+	background: linear-gradient(180deg, #FF8684 0%, #CB6DF3 100%);
+	transition: opacity 0.15s;
+}
+
+.confirm:active {
+	opacity: 0.65;
+}