增加弹窗显示

2025-08-20 11:36:31 +08:00
parent b1064f9118
commit 27d64dbd72
5 changed files with 208 additions and 9 deletions
--- a/src/components/customShowModal.vue
+++ b/src/components/customShowModal.vue
@@ -0,0 +1,163 @@
+<template>
+<view class="model" v-if="visibleF">
+	<view class="model-con">
+		<view class="model-top" v-if="title">{{title}}</view>
+		<view :class="{'model-middle':true,'m-height':!title}">{{contents}}</view>
+		<view class="model-bottom">
+			<button type="primary" class="btn-cancel" @click="handleCancel" v-if="btnFlag2">Cancel</button>
+			<button type="default" class="btn-green" @click="handleConfirm" v-if="btnFlag" :loading="loading" :disabled="loading">{{btnTxt}}</button>
+		</view>
+	</view>
+</view>
+</template>
+
+<script setup>
+import { ref,watch } from 'vue'
+const props = defineProps({
+	visible:{
+		type:Boolean
+	},
+	title:{
+		type: String,
+	},
+	content: {
+		type: String
+	},
+	btnFlag:{
+		type:Boolean,
+		default:true
+	},
+	btnFlag2:{
+		type:Boolean,
+		default:true
+	},
+	btnTxt:{
+		type:String,
+		default:'确定'
+	}
+})
+
+let visibleF = ref(props.visible)
+let titles = ref(props.title)
+let contents = ref(props.content)
+let btnFlags = ref(props.btnFlag)
+let loading = ref(false);
+
+// 显示隐藏
+watch(() => props.visible, (newVal, oldVal) => {
+    loading.value = false;
+	visibleF = newVal
+},{
+    deep:true, // 深度监听
+    immediate:true // 立即执行
+});
+
+// 标题
+watch(() => props.title, (newVal, oldVal) => {
+	titles.value = newVal
+},{
+    deep:true,
+    immediate:true
+});
+// 内容
+watch(() => props.content, (newVal, oldVal) => {
+	contents = newVal
+},{
+    deep:true,
+    immediate:true
+});
+
+// 按钮
+watch(() => props.btnFlag, (newVal, oldVal) => {
+	btnFlags.value = newVal
+},{
+    deep:true,
+    immediate:true
+});
+
+// 调用父组件的方法
+const emit = defineEmits(['close','confirm'])
+const handleCancel = ()=>{
+	emit('close');
+}
+
+const handleConfirm = ()=>{
+	loading.value=true;
+	emit('confirm')
+}
+
+</script>
+
+<style lang="scss" scoped>
+.model {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.4);
+	z-index: 9999;
+	.model-con{
+		background: #fff;
+		position: fixed;
+		top:50%;
+		left:50%;
+		width:500rpx;
+		min-height: 278rpx;
+		margin-left: -270rpx;
+		margin-top:-139rpx;
+		border-radius: 24rpx;
+		padding:20rpx 20rpx 30rpx;
+	}
+	.model-top{
+		text-align: center;
+		padding:20rpx 0;
+		font-size:36rpx;
+	}
+	.model-middle{
+		// margin-top:290rpx;
+		text-align: center;
+		font-size:36rpx;
+		color:#393939;
+		.font-green{
+			color:#05A3F4;
+			font-size: 42rpx;
+			font-weight: bold;
+			padding:20rpx 0;
+		}
+	}
+	.model-middle.m-height{
+		padding:60rpx 0 20rpx;
+	}
+	.model-bottom{
+		display: flex;
+		justify-content: center;
+		margin-top:40rpx;
+		// align-items: center;
+		.btn-green,.btn-cancel{
+			background-color: #fff;
+			color:#05A3F4;
+			border-radius: 48rpx;
+			font-size:30rpx;
+			width:200rpx;
+			height:65rpx;
+			line-height: 60rpx;
+			text-align: center;
+			font-size:30rpx;
+			border: 1px solid #05A3F4;
+			margin-left:0rpx !important;
+			margin-right:0 !important;
+			&::after{
+				border:none;
+				border-radius: 37rpx;
+			}
+		}
+		.btn-green{
+			border: 1px solid #05A3F4;
+			background-color:#05A3F4;
+			color:#fff;
+			margin-left:20rpx !important;
+		}
+	}
+}
+</style>