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

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

采用element-plus中的dialog组件

https://element-plus.gitee.io/zh-CN/component/dialog.html

1、二级弹框

1-点击弹框

2-1一级弹框效果

2-2二级弹框效果

代码

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-show="props.isShow">
        <!-- 关闭按钮 -->
		<Handle @handle-close="handleClose"></Handle>
        <div style="color: #fff; font-size: 24px; margin-top: 50px" @click="handleKinds">点击显示二级弹框--具体分类页面</div>
        <!-- 具体分类 -->
        <Kinds :is-show="showKinds" @is-close="handleCloseKinds"></Kinds>
    </div>
</template>

<script setup lang="ts" name="bookStatistics">
import Handle from "@/components/common/handle.vue";
import Kinds from "./modules/kinds.vue";
import { onMounted, ref } from "vue";
    
const props = defineProps({
	isShow: Boolean,
    showDec: {
		type: Boolean,
		required: false,
		default: false
	},
});
    
// 弹窗选择
// Kinds
const showKinds = ref(false);
const handleCloseKinds = () => {
	showKinds.value = false;
};
const handleKinds = () => {
	showKinds.value = true;
};
    

// 关闭页面
const emit = defineEmits(["isClose"]);
const handleClose = (val: boolean) => {
	emit("isClose", val);
};
</script>

3、二级弹框界面

kinds.vue

<template>
	<div class="root-choose-box" v-show="isShow">
		<div class="root-choose-view">
			<Close @handle-close="handleClose"></Close>
			<div>二级弹框内容区</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="unit">
import { ref } from "vue";
import Close from "@/components/common/close.vue";
const dateTime = ref("");
defineProps({
	isShow: Boolean
});

// 关闭页面
const emit = defineEmits(["isClose"]);
const handleClose = (val: boolean) => {
	emit("isClose", val);
};
</script>
<style scoped lang="scss">
// @import "./index.scss";
</style>

4、公共样式

3.1、定义样式

src\styles\common.scss

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

// 二级页面弹窗选择
.root-choose-box {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	.root-choose-view {
  	position: relative;
		box-sizing: border-box;
		width: 80%;
		height: 90%;
		padding: 56px 0;
		background: #121318;
	}
}

3.2、引入样式

src\main.ts

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

5、关闭组件界面

@/components/common/handle.vue

@/components/common/close.vue

<template>
    <!-- 关闭按钮界面 -->
	<div class="handle-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;
	}
}