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

目录
  • 实现vue3点击出现弹窗后背景变暗且不可操作
  • 一、手写遮罩层方法
    • 1. 效果
    • 2. 代码
    • 3. 代码分析
    • 4. 改进
    • 4. 将背景遮罩层封装成组件使用
  • 二、quasar 方法

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

一、手写遮罩层方法

1. 效果

2. 代码

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

<template>
  <div class="bg-cover" v-if="showCover"></div>
  <div class="column" style="width: 25px;">
  	<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" />
  <AddTask :showAddTask.sync="AddTaskFlag" class="addtask-box" @closeAddTask="closeAddTask"></AddTask>
</template>

<script setup>
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>

<style scoped lang="scss">

.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>
  <div class="bg-cover" v-if="showCover"></div>
</template>

<script setup>
const props = defineProps(['showCover'])
</script>

<style scoped lang='scss'>
.bg-cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: 98;
}
</style>

其他组件中需要使用时:

<template>
    <BgCover :showCover.sync="showCoverFlag"></BgCover>
    <div class="column" style="width: 25px">
        <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" />
    <AddTask :showAddTask.sync="AddTaskFlag" class="addtask-box" @closeAddTask="closeAddTask"></AddTask>
</template>

<script setup>
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>

<style scoped lang="scss">
.addtask-box {
    z-index: 99;
    top: 300px;
}

</style>

二、quasar 方法

利用quasar dialog组件的 persistent 属性。

代码:

<template>
    <div class="column" style="width: 25px">
        <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>
        <AddTask :showAddTask.sync="AddTaskFlag" class="addtask-box" @closeAddTask="closeAddTask"></AddTask>
    </q-dialog>

</template>

<script setup>
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>

<style scoped lang="scss">
.addtask-box {
    z-index: 99;
    top: 300px;
}
</style>

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

(0)

相关推荐

  • Vue自定义模态对话框弹窗

    本文实例为大家分享了Vue自定义模态对话框弹窗的具体代码,供大家参考,具体内容如下 模态对话框弹窗效果: 父组件(应用页面)主要代码: <template>     <view class="app-container">         <modal-dialog showText="确定要取消收藏吗?" :isShowDialog="isDialog" @cancel="isDialog = false

  • vue中的slot封装组件弹窗

    目录 slot封装组件弹窗 vue组件slot入门---弹窗组件 插槽的基础使用 弹窗组件 slot封装组件弹窗 <template>   <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" center>     <slot name="content"></slot>   </el

  • vue如何通过点击事件弹出弹窗页面详解

    目录 步骤一 步骤二 总结 步骤一 创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容: <template> <!--1.首先,弹窗页面中要有el-dialog组件即弹窗组件,我们把弹窗中的内容放在el-dialog组件中--> <!--2.设置:visible.sync属性,动态绑定一个布尔值,通过这个属性来控制弹窗是否弹出--> <el-dialog title="弹窗" :visible.syn

  • vue ant design 封装弹窗表单的使用

    目录 vue ant design 封装弹窗表单 使用ant-design-vue的Form表单 使用脚手架新建项目 安装并导入ant-design-vue,使用Form组件 启动应用,测试验证 vue ant design 封装弹窗表单 <template> <div id="formForm"> <a-modal :visible="true" :title='title' @ok="handleOk('ok')"

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

    目录 实现vue3点击出现弹窗后背景变暗且不可操作 一.手写遮罩层方法 1. 效果 2. 代码 3. 代码分析 4. 改进 4. 将背景遮罩层封装成组件使用 二.quasar 方法 实现vue3点击出现弹窗后背景变暗且不可操作 一.手写遮罩层方法 1. 效果 2. 代码 AddTask.vue是我自定义的组件,即要弹出的弹窗,不是此笔记重点,此处不做详细说明. <template> <div class="bg-cover" v-if="showCover&

  • 点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

    复制代码 代码如下: <html><head><title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/cs

  • JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!

  • jQuery实现点击弹出背景变暗遮罩效果实例代码

    本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(&

  • js实现仿网易点击弹出提示同时背景变暗效果

    本文实例讲述了js实现仿网易点击弹出提示同时背景变暗效果.分享给大家供大家参考.具体如下: 这里仿网易点击弹出提示,背景变暗提示层效果,圆角,美观简洁,代码稍嫌多. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/ 具体代码如下: <html> <head> <title>点击弹出提示,背景变暗</title> <script> func

  • Android Button按钮点击背景和文字变化操作

    Android 原生的按钮点击状态是有变化的,但是如果是自己加了一个.png格式的图片为背景色,按钮点击就不会有任何效果,为了达到点击按钮有一闪的效果,我们就需要准备两张图进行切换, 而且文字也要变色,老规矩废话不多说直接上代码: 按钮背景图片放在 drawable/background_button.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="h

  • jQuery实现按钮只点击一次后就取消点击事件绑定的方法

    本文实例讲述了jQuery实现按钮只点击一次后就取消点击事件绑定的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" id="my-selector" value="只能点击一次" /> <script> $('#my-selector').bind('click', function() { $(this).unbind('click'); alert('Clicked and un

  • 关于tomcat点击startup.bat后闪退问题的解决办法

    问题:使用免安装的tomcat双击startup.bat后,启动窗口一闪而过,而且tomcat服务未启动. 原因:在启动tomcat是需要读取环境变量和配置信息,缺少了这些信息,就不能登记环境变量,导致了tomcat的闪退. 解决办法: 1.在已解压的tomcat的bin文件夹下找到startup.bat,右击->编辑.在文件头加入下面两行: SET JAVA_HOME=D:\Java\jdk1.6.0_10 (java jdk目录) SET TOMCAT_HOME=E:\tomcat-6.0.

  • Asp.net 中mvc 实现超时弹窗后跳转功能

    为了实现保持登录状态,可以用cookie来解决这一问题 假设过期时间为30分钟,校验发生在服务器,借助过滤器,可以这样写 public class PowerFilter : AuthorizeAttribute { public override void OnAuthorization(AuthorizationContext filterContext) { var cookie = HttpContext.Current.Request.Cookies["loginInfo"]

  • js点击文本框后才加载验证码实例代码

    经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title

随机推荐