8.27更新自定义组件

2025-08-27 11:12:35 +08:00
parent ef5b3fb59f
commit 58d9fb3d7a
5 changed files with 175 additions and 3 deletions
@@ -0,0 +1,166 @@
+<template>
+	<view class="dialog-overlay" v-if="visible" @click="handleOverlayClick">
+		<view class="dialog-container" @click.stop>
+			<!-- 弹窗标题 -->
+			<view class="dialog-header">
+				<text class="dialog-title">{{ title }}</text>
+			</view>
+			
+			<!-- 弹窗内容 -->
+			<view class="dialog-content">
+				<slot name="content">
+					<text class="default-content">{{ content }}</text>
+				</slot>
+			</view>
+			
+			<!-- 弹窗底部按钮 -->
+			<view class="dialog-footer">
+				<view 
+					class="dialog-btn cancel"
+					
+					@click="oncancel"
+				>
+					<text class="btn-text">取消</text>
+				</view>
+				<view
+					class="dialog-btn confirm"
+					@click="onconfirm"
+				>
+					<text class="btn-text">确定</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { defineProps, defineEmits } from 'vue'
+	
+	const props = defineProps({
+		visible: {
+			type: Boolean,
+			default: true
+		},
+		title: {
+			type: String,
+			default: '温馨提示'
+		},
+		content: {
+			type: String,
+			default: ''
+		},
+		
+		closeOnOverlay: {
+			type: Boolean,
+			default: true
+		}
+	})
+	
+	const emit = defineEmits(['close'])
+	
+
+	
+	const oncancel=()=>{
+		emit('close');
+	  
+	}
+	const onconfirm=()=>{
+		emit('close')
+	}
+</script>
+
+<style lang="scss" scoped>
+	.dialog-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 9999;
+	}
+	
+	.dialog-container {
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		width: 92%;
+		
+		overflow: hidden;
+		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
+	}
+	
+	.dialog-header {
+		padding: 40rpx 40rpx 20rpx;
+		text-align: center;
+		.dialog-title {
+			font-size: 36rpx;
+			color: #8B2316;
+			
+		}
+	}
+	
+	.dialog-content {
+		padding: 40rpx;
+		min-height: 120rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		.default-content {
+			font-size: 32rpx;
+			color: #333;
+			line-height: 1.5;
+			text-align: center;
+		}
+	}
+	
+	.dialog-footer {
+		display: flex;
+		padding:0 40rpx;
+		
+		.dialog-btn {
+			flex: 1;
+			height: 100rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-top: 1rpx solid #f0f0f0;
+			border-right: 1rpx solid #f0f0f0;
+			transition: background-color 0.2s;
+			
+			&:last-child {
+				border-right: none;
+			}
+			
+			&:active {
+				background-color: #f5f5f5;
+			}
+			
+			&.cancel {
+				.btn-text {
+					color: #999999;
+				}
+			}
+			
+			&.confirm {
+				.btn-text {
+					color: #8B2316;
+					font-weight: 500;
+				}
+			}
+			
+			&.default {
+				.btn-text {
+					color: #333333;
+				}
+			}
+			
+			.btn-text {
+				font-size: 32rpx;
+			}
+		}
+	}
+</style>