vue3点击出现弹窗后背景变暗且不可操作的实现代码_vue.js_

实现vue3点击出现弹窗后背景变暗且不可操作

一、手写遮罩层方法

1. 效果

2. 代码

AddTask.vue是我自定义的组件，即要弹出的弹窗，不是此笔记重点，此处不做详细说明。

3. 代码分析

4. 改进

上述代码在弹窗较小，不需要滚动弹窗时可用，因为上述方案会导致弹窗也无法滚动而使弹窗内容显示不完全。
如下图，人员列表未显示完全。

解决方法：给弹出层设置overflow-y: scroll;。
效果展示：

4. 将背景遮罩层封装成组件使用

将背景遮罩层封装成一个组件，可以实现复用，而不需要在每一个需要使用的页面都写一遍html和css样式。

BgCover.vue：

其他组件中需要使用时：

二、quasar 方法

利用quasar dialog组件的 persistent 属性。

代码：

到此这篇关于vue3点击出现弹窗后背景变暗且不可操作的实现代码的文章就介绍到这了,更多相关vue点击出现弹窗背景变暗内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！