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

版权声明：

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

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