vue3中，封装dialog组件，实现页面级一级弹框、二级弹框和三级弹框(三)——三级弹框

vue3中，封装dialog组件，实现页面级一级弹框、二级弹框和三级弹框(三)——三级弹框

采用element-plus中的dialog组件之嵌套的对话框

https://element-plus.gitee.io/zh-CN/component/dialog.html#%E5%B5%8C%E5%A5%97%E7%9A%84%E5%AF%B9%E8%AF%9D%E6%A1%86

效果

3-1一级弹框

3-2二级弹框

3-3三级弹框效果

代码

1、引用界面

bookNum.vue

<template>
	<div class="container-box">
       <div style="color: #fff; font-size: 24px" @click="handleNum">点击显示弹框页面</div>
		<!-- 统计列表 -->
		<BookStatistics
            :show-dec="true"
			:is-show="showBookState"
			@is-close="handleCloseBookStatistics"
		></BookStatistics>
    </div>
</template>

<script setup lang="ts" name="bookNum">
import { ref } from "vue";
import BookStatistics from "../components/bookStatistics.vue";    
    //弹框界面
const showBookState = ref(false);
    // 打开弹框
const handleNum = () => {
	showBookState.value = true;
}; 
    //关闭弹框
const handleCloseBookStatistics = () => {
	showBookState.value = false;
};
</script>

<style scoped lang="scss">
.container-box {
	max-height: 200px;
	min-height: 200px;
}
</style>

2、弹框界面

bookStatistics.vue

<template>
	<div class="root-second-box" v-if="props.isShow">
		<Handle @handle-close="handleClose"></Handle>
		<div class="table-model">
			<span @click="details()" style="color: #fff">弹框1-查看分类详情</span>
			<!-- 弹框1  分类 -->
			<el-dialog v-model="dialogVisible" width="100%" :before-close="close" :show-close="false" :fullscreen="true">
				<div class="handle-box">
					<img src="@/assets/svg/close.svg" alt="" srcset="" @click="detailsClose" />
				</div>
				<!-- 弹框2 分类 -->
				<span @click="detailed()" style="color: #fff">弹框2-查看明细详情</span>
			</el-dialog>
			<el-dialog v-model="dialogValue" width="100%" :before-close="close" :show-close="false" :fullscreen="true">
				<div class="handle-box">
					<img src="@/assets/svg/close.svg" alt="" srcset="" @click="detailedClose" />
				</div>

				<!-- 弹框3 明细 -->
				<span>弹框3</span>
			</el-dialog>
		</div>
	</div>
</template>
<script setup lang="ts" name="historyAlarmList">
import Handle from "@/components/common/handle.vue";
import { onMounted, ref } from "vue";

const props = defineProps({
	isShow: Boolean
});
onMounted(() => {
	// dateTime = new Date();
});

// 二级弹框
const dialogVisible = ref(false);
const details = (scope: any) => {
	console.log(scope);
	dialogVisible.value = true;
};
const detailsClose = () => {
	dialogVisible.value = false;
};

// 三级弹框
const dialogValue = ref(false);
const detailed = (scope: any) => {
	console.log(scope);
	dialogValue.value = true;
};
const detailedClose = () => {
	dialogValue.value = false;
};

// 关闭页面
const emit = defineEmits(["isClose"]);
const handleClose = (val: boolean) => {
	emit("isClose", val);
};
</script>
<style scoped lang="scss">
:deep(.el-dialog) {
	.el-dialog__header {
		display: none;
	}
	.dj-dialog-content {
		padding: 0;
		overflow: unset;
	}
}
:deep(.el-dialog.is-fullscreen) {
	background: linear-gradient(#121318, #121318), linear-gradient(#010a1a, #010a1a), linear-gradient(#000000, #000000), #030e1a;
}
.handle-box {
	display: flex;
	position: fixed;
	z-index: 100;
	right: 172px;
	top: 12px;
	> img {
		width: 40px;
		cursor: pointer;
		padding: 12px;
	}
	> img:hover {
		background-color: #2a2d36;
	}
}
</style>

3、公共样式

3.1、定义样式

src\styles\common.scss

// 二级页面样式
.root-second-box {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(#121318, #121318), linear-gradient(#010a1a, #010a1a), linear-gradient(#000000, #000000), #030e1a;
}

// 表格公用样式
.table-model {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 80%;
	max-height: 100%;
	padding: 0 120px;
	
}

3.2、引入样式

src\main.ts

// CSS common style sheet (CSS通用样式表)
import "@/styles/common.scss";

4、关闭组件界面

@/components/common/handle.vue

<template>
    <!-- 关闭按钮界面 -->
	<div class="handle-box">
        <!-- <div class="close-box"> -->
		<img src="@/assets/svg/close.svg" alt="" srcset="" @click="handleClose" />
	</div>
</template>
<script setup lang="ts" name="handle">
const emit = defineEmits(["handleClose"]);
const handleClose = () => {
	emit("handleClose", false);
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>

index.scss

.handle-box{
	display: flex;
	position: fixed;
	z-index: 99;
	right: 36px;
	top: 12px;
	> img{
		width: 40px;
		cursor: pointer;
		padding: 12px;
	}
	> img:hover{
		background-color: #2A2D36;
	}
}