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

分享到

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

JavaScript 来源：互联网作者：秩名发布时间：2022-08-09 12:28:49 人浏览

摘要

实现vue3点击出现弹窗后背景变暗且不可操作一、手写遮罩层方法 1. 效果 2. 代码 AddTask.vue是我自定义的组件，即要弹出的弹窗，不是此笔记重点，此处不做详细说明。 1 2 3 4 5 6 7 8 9 1

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

一、手写遮罩层方法

1. 效果

2. 代码

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

<q-btn v-for="n in 12" round :color="'teal-'+n" icon="add" class="q-ma-lg"/>

</div>

<q-btn round color="primary" icon="add" size="24px" class="fixed-bottom-right q-ma-lg" @click="OpenAddTask()" @closeAddTask="closeAddTask" />

</template>

import { ref } from "vue";

import AddTask from '../components/AddTask.vue'

//添加任务弹窗

let AddTaskFlag = ref(false);

let showCover = ref(false);

function OpenAddTask(){

AddTaskFlag.value = true;

showCover.value = true;

document.body.style.overflow = "hidden"

}

function closeAddTask(){

AddTaskFlag.value = false;

showCover.value = false;

document.body.style.overflow = "auto"

}

</script>

.addtask-box{

z-index: 99;

top: 300px;

}

.bg-cover {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background-color: rgba(0, 0, 0, .8);

z-index: 98;

}

</style>

3. 代码分析

4. 改进

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

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

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

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

BgCover.vue：

</template>

const props = defineProps(['showCover'])

</script>

.bg-cover {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background-color: rgba(0, 0, 0, .8);

z-index: 98;

}

</style>

其他组件中需要使用时：

<q-btn v-for="n in 12" round :color="'teal-' + n" icon="add" class="q-ma-lg" />

</div>

<q-btn round color="primary" icon="add" size="24px" class="fixed-bottom-right q-ma-lg" @click="OpenAddTask()"

@closeAddTask="closeAddTask" />

</template>

import { ref } from "vue";

import AddTask from "../components/AddTask.vue";

import BgCover from "../components/BgCover.vue";

//添加任务弹窗

let AddTaskFlag = ref(false);

let showCoverFlag = ref(false);

function OpenAddTask() {

AddTaskFlag.value = true;

showCoverFlag.value = true;

document.body.style.overflow = "hidden";

}

function closeAddTask() {

AddTaskFlag.value = false;

showCoverFlag.value = false;

document.body.style.overflow = "auto";

}

</script>

.addtask-box {

z-index: 99;

top: 300px;

}

</style>

二、quasar 方法

利用quasar dialog组件的 persistent 属性。

代码：

<q-btn v-for="n in 12" round :color="'teal-' + n" icon="add" class="q-ma-lg" />

</div>

<q-btn round color="primary" icon="add" size="24px" class="fixed-bottom-right q-ma-lg" @click="OpenAddTask()"

@closeAddTask="closeAddTask" />

<q-dialog v-model="AddTaskFlag" persistent>

</q-dialog>

</template>

import { ref } from "vue";

import AddTask from "../components/AddTask.vue";

//添加任务弹窗

let AddTaskFlag = ref(false);

function OpenAddTask() {

AddTaskFlag.value = true;

}

function closeAddTask() {

AddTaskFlag.value = false;

}

</script>

.addtask-box {

z-index: 99;

top: 300px;

}

</style>

您可能感兴趣的文章 :

原文链接 : https://www.pudn.com/news/62ef2f7755398e076b3db303.html

Tag : vue3(6)窗口(5)弹出(6)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。

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

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

一、手写遮罩层方法

1. 效果

2. 代码

3. 代码分析

4. 改进

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

二、quasar 方法

您可能感兴趣的文章 :

vue el-switch初始值(默认值)不能正确显示状态问题

微信小程序跳转外部链接的实现方法

自己写一个uniapp全局弹窗(APP端)

JavaScript console对象与控制台使用介绍

JavaScript错误处理机制全面分析介绍

JavaScript Object.defineProperty与proxy代理模式的使用详

Javascript Object对象类型使用介绍

JavaScript代码不能被阻断的稳定性建设

JavaScript前端学算法题解LeetCode最大重复子字符串

uni-app小程序沉浸式导航实现的全过程

React配置子路由的实现

微信小程序地图(map)组件点击(tap)获取

微信小程序实现工作时间段选择

用js实现猜数字小游戏的代码

vue与react的介绍