vue3中，封装dialog组件，实现页面级一级弹框、二级弹框和三级弹框(一)——一级弹框 & 封装关闭按钮 & 全局定义和引入公共样式 & 页面@import引入自定义样式

vue3中，封装dialog组件，实现页面级一级弹框、二级弹框和三级弹框(一)——一级弹框 & 封装关闭按钮 & 全局定义和引入公共样式 & 页面@import引入自定义样式

1、一级弹框

1-点击弹框

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>内容区</div>
    </div>
</template>

<script setup lang="ts" name="bookStatistics">
import Handle from "@/components/common/handle.vue";
import { onMounted, ref } from "vue";
    
const props = defineProps({
	isShow: Boolean,
    showDec: {
		type: Boolean,
		required: false,
		default: false
	},
});
// 关闭页面
const emit = defineEmits(["isClose"]);
const handleClose = (val: boolean) => {
	emit("isClose", val);
};
</script>

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;
}

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, .close-box{
	display: flex;
	position: fixed;
	z-index: 99;
	right: 36px;
	top: 12px;
	> img{
		width: 40px;
		cursor: pointer;
		padding: 12px;
	}
	> img:hover{
		background-color: #2A2D36;
	}
}
.close-box{
	right: 12px;
	position: absolute;
}