vue的关闭遮罩层

最新推荐文章于 2023-01-31 17:29:02 发布
最新推荐文章于 2023-01-31 17:29:02 发布
阅读量1.9k 收藏
点赞数
分类专栏： vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41033048/article/details/108540464
版权 
   <transition name="fade">
      <div class="mask" v-show="shareContShow" @click="hidePanel($event)">
        <!-- @mouseenter="downloadShareOpen = true"
        @mouseleave="downloadShareOpen = false"-->
        <div class="shareContent">
          <div class="downloadShare" v-if="downloadShareOpen">
            <a id="downLink" @click=
最低0.47元/天 解锁文章
叶川飞流
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用css实现遮罩层 jquery实现点击任意位置关闭遮罩
yangruini_love的博客
06-29 1057
首先先看看完整的html，css可以根据实际情况进行更改。使用了一个鼠标悬停效果，默认颜色透明度为0.3，当鼠标移上去后，透明度为1。 接下来介绍的是俩种方式关闭遮罩方法一：点击×关闭遮罩 方法二：点击任意位置关闭遮罩.........
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
qq_39695210的博客
10-08 1406
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
js打开关闭遮罩层
07-16
js 打开关闭遮罩层 loading图片
vue 点击遮罩层功能区以外的地方关闭遮罩层
GongWei_的博客
04-29 2724
点击红色框外的遮罩层区域关闭遮罩层 方法一： 关键点：@click=“close($event)” ref=“msk” <div v-if="popup.winning" class="coupon-popup" @touchmove.prevent @click="close($event)"> <div class="popup-content" ref="msk"> <img class="coupon-page" :src="popup.couponpage.
点击遮罩层的背景关闭遮罩层
farmerXU的博客
08-17 638
<div class="active-rule"> <div class="active-rule-container"></div> </div> $(".active-rule").click(function() { $(".active-rule").hide() }) $(".active-rule-container").click(function(event){ event.stopPropagation(); }) ..
解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题
weixin_55966654的博客
12-05 7259
（1）弹窗被遮罩层被遮罩层遮挡问题； （2）关闭弹窗后，遮罩层不关闭问题；
vue 弹出遮罩层样式实例
10-15
主要介绍了vue 弹出遮罩层样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 遮罩层阻止默认滚动事件操作
11-20
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 ”dialog”> 如果不是使用Vue的话，可以给body添加overflow:hidden属性解决 补充知识：vue...
解决Vue开发中对话框被遮罩层挡住的问题
10-17
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住,怎么来解决这个问题呢？下面小编给大家带来了Vue开发中对话框被遮罩层挡住的问题及解决方法，一起看看吧
vue3设置遮罩1
leveretz的博客
11-08 236
动手实现高斯模糊遮罩层的对话框效果
vue3.0 的Teleport
qq_46582421的博客
01-15 361
Teleport： 什么是Teleport?——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。 如图所示： 文件目录： Child.vue代码： <template> <div class="child"> <h3>我是Child组件</h3> <Son/> </div> </template> <script> import Son
if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
weixin_39968266的博客
12-22 488
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。v-if 是直接删除dom节点, 就是这个div就不存在了v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在;实现如下maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它有...
解决跳转到vue页面出现遮罩层
kdjfh的博客
01-31 1248
解决跳转到vue页面出现遮罩层
解决vue和el-dialog的遮罩层消失
子非渔
11-04 5051
解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body=‘false’ 错误分析 1）若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了position:...
vue点击其他任意地方关闭弹窗或遮罩层
weixin_45682701的博客
03-04 1493
需求 vue点击其他任意地方关闭弹窗或遮罩层 代码 <!-- 遮罩层 --> <div class="dialog" v-show="shareShow" @click="shareShow=!shareShow"> </div> 注意：遮罩层样式是浮动的 遮罩层样式：
【VUE】加载提示遮罩
SZnAl的博客
11-17 1947
在向后端请求数据或向后端发送数据时，为防止用户在此期间乱操作，所以在页面添加一个加载提示的遮罩，防止用户乱操作。
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
zhichaogong的博客
06-15 8096
关于element-ui弹窗组件el-dialog，阻止点击遮罩层关闭的问题，以及全局处理和局部处理的方法 前言 在使用element-ui的组件时，有时候根据项目需求，需要修改组件默认的属性值。我们公司项目的需要在el-dialog弹窗组件中写入表单数据，由于表单数据比较多，有时候误触了el-dialog的遮罩层就关闭弹窗了，导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。 下面针对使用npm安装使用element-ui 1. 全局配置 npm引入，直接在main.js文件中写入如下
vue手写遮罩层弹窗，实现点击遮罩层和关闭按钮关闭弹窗
weixin_45121510的博客
11-26 6105
父组件 <template> <section> <div class="ruleBtn" @click="handleClick($event)">点击按钮</div> <RuleModal v-if="ruleModalVisible" ref="ruleModal" :modalConfig="modalConfig" @close="closeRuleModal" /
基于vue3.0的遮罩
weixin_41897680的博客
09-28 2301
前言 最近在uniapp中要写一个弹窗，弹窗好写，但是遮罩没有接触过。找到了下面这篇文章，推荐仔细阅读一下。在这篇文章的基础下，简单封装了一个遮罩。 推荐文章：论如何用Vue实现一个弹窗-一个简单的组件实现 遮罩 备注 组件名不要命名为mask，控制台会提示Do not use built-in or reserved HTML elements as component id，意思是不要将内置或保留的HTML元素用作组件id 效果 添加了一个close-on-click-modal属性，默认点击遮罩，遮罩
在vue中给 el-dialog添加遮罩层效果，请求后端接口开启遮罩层，请求完毕关闭遮罩，避免因数据渲染卡顿问题
最新发布
06-13
为了实现在请求后端接口时开启遮罩层，并在请求完毕后关闭遮罩层的功能，我们需要借助 Vue 的生命周期函数和钩子函数来实现。具体实现步骤如下： 1. 在 `data` 中定义一个 `loading` 变量，用于控制遮罩层的显示和隐藏。 ```javascript data() { return { loading: false, // 是否显示遮罩层 // 其他数据... } } ``` 2. 在需要发送请求的方法中，先将 `loading` 变量设置为 `true`，即显示遮罩层，然后发送请求。 ```javascript methods: { loadData() { this.loading = true; // 显示遮罩层 axios.post('/api/data') .then(res => { // 处理请求结果 }) .catch(err => { // 处理请求错误 }) .finally(() => { this.loading = false; // 隐藏遮罩层 }) } } ``` 3. 在 `el-dialog` 上绑定 `:visible.sync` 属性，用于控制对话框的显示和隐藏，同时将 `:lock-scroll` 属性设置为 `true`，用于显示遮罩层。 ```html <el-dialog :visible.sync="dialogVisible" :lock-scroll="true"> <!-- 对话框内容 --> </el-dialog> ``` 4. 在 `mounted` 钩子函数中，监听 `loading` 变量的变化，根据变化来控制对话框和遮罩层的显示和隐藏。 ```javascript mounted() { this.$watch('loading', (val) => { if (val) { this.dialogVisible = false; // 隐藏对话框 } else { this.dialogVisible = true; // 显示对话框 } }) } ``` 这样，当执行 `loadData` 方法时，会先显示遮罩层，然后发送请求，请求完毕后再隐藏遮罩层，避免了因数据渲染卡顿问题。同时，由于监听了 `loading` 变量的变化，还可以在遮罩层显示的同时隐藏对话框，提高用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值