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(#, #), 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(#, #), 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; } } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10871.html