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

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

版权声明：

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

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