VUE点击遮罩层内功能区以外的地方，遮罩层关闭

野性酷女 2023-02-22 05:21 1阅读 0赞

## VUE点击遮罩层内功能区以外的地方，遮罩层关闭 ##

1.template代码

<button @click="writeMessageShow=true">打开遮罩</button>
    <section class="wmassageMask" v-show="writeMessageShow" @click="writeMessageFun($event)">
    　　<div class="messageMaskContent" ref="msk">
    　　　　<p class="wenziP">文字留言</p>
    　　　　<p class="yuyinP">语音留言</p>
    　　</div>
    </section>

2.script代码

data () { 
    
    　　return { 
    
    　　　　writeMessageShow: false
    
    　　}
    
    },
    
    methods: { 
    
    　　writeMessageFun (ev) { 
    　　　　if (!this.$refs.msk.contains(ev.target)) { 
    　　　　　　this.writeMessageShow = false;
    　　　　}
    　　}
    }

3.style代码

.wmassageMask{ 
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,.3);
    z-index: 101; .messageMaskContent{ 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    }
    p{ 
    text-align: center;
    font-size: .768rem;
    line-height: 1;
    margin: 1.365333rem auto;
    font-weight: 500;
    }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue遮罩层出现禁止穿透遮罩滚动页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我不是女神ヾ/ 2023年07月07日 03:40/ 0 赞/ 154 阅读

相关 VUE点击遮罩层内功能区以外的地方，遮罩层关闭

VUE点击遮罩层内功能区以外的地方，遮罩层关闭 1.template代码 <button @click="writeMessageShow=true">打开遮罩

野性酷女/ 2023年02月22日 05:21/ 0 赞/ 2 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 351 阅读

相关 vue的关闭遮罩层

<transition name="fade"> <div class="mask" v-show="shareContShow" @click="

ゝ一世哀愁。/ 2022年12月06日 01:27/ 0 赞/ 378 阅读

相关 js点击遮罩层内容以外的地方隐藏遮罩

combatBoxc内容区域 combatBox整个遮罩层最外面的div > <div class="combatBox" style="display: bl

ゞ浴缸里的玫瑰/ 2022年10月14日 15:57/ 0 赞/ 289 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 342 阅读

相关小程序防止点击遮罩层后遮罩层下面也反应（有点击事件）

最近在做自定义弹窗，不免会使用到遮罩层或者说蒙层。但是关键是，有遮罩层后，再点击遮罩层下的组件，依然会产生点击事件。那如何解决这个问题呢？网上给出了几种方法

墨蓝/ 2022年05月17日 11:56/ 0 赞/ 494 阅读

相关 JavaScript点击弹出遮罩层

JavaScript点击弹出遮罩层开发工具与关键技术：DW与JS 作者：戴怡斌撰写时间：2019年1月18日下面我

小咪咪/ 2022年03月25日 05:51/ 0 赞/ 529 阅读

相关点击遮罩层内容区域以外的区域，关闭遮罩层

html <div class="div1"> <dl class="div2"> 内容... </dl> </div> c

﹏ヽ暗。殇╰゛Y/ 2021年11月29日 16:36/ 0 赞/ 583 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 558 阅读