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

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;
}
}

热门文章

暂无图片
编程学习 ·

线程池:ThreadPoolExecutor

github地址: https://github.com/lishanglei/thread-pool.git 源码 public ThreadPoolExecutor(int corePoolSize, //核心线程数int maximumPoolSize,//最大线程数量long keepAliveTime, //线程存活时间TimeUnit unit, //线程存活时间单位 BlockingQueue<Runnable> w…
暂无图片
编程学习 ·

Bazel responsitory_rule 创建一个 rule

bazel respository_rule 主要功能是创建一个workspace 空间。对于package 内部的BUILD.tpl文件target 可以使用 responsity_ctx.file("//package") 创建 BUILD文件,或者repository_ctx.template(“BUILD”, build_tpl, {})对BUILD文件进行修改,然后通过@< name&…
暂无图片
编程学习 ·

ngrok内网穿透的使用

**有时候项目没有部署到服务器,需要给用户展示效果,就可以用ngrok做内网穿透来解决这个问题** **ngrok的用法:**进入ngrok官网 http://www.ngrok.cc/,注册登录进入 在隧道管理中,进行开通隧道(即购买免费的服务器)3.开通隧道,配置端口ip,进行添加开通。4.开通后,在隧道管…
暂无图片
编程学习 ·

CMMI 2.0 和 1.3

CMMI2.0与1.3在组织形式区别很大,很多PA和之前的不太一样了,而且PA在2.0中叫实践域,1.3中叫过程域。不过其实核心内容没有大的变化,只是相关内容的位置进行了调整,部分描述进行了优化。目前是过渡阶段,2.0和1.3都可以评估,但截止日期之后就只适用2.0了。1.3评估的截止日…
暂无图片
编程学习 ·

quartus ii 使用modelsim altera进行仿真

第一种:先随便写一个程序,有输入,有时钟,有输出再点击processing-->start-->start test bench template writer然后就会在modlsim的文件中生成一个.vt的文件 然后打开这个文件接下来就是再initial和always里面添加信号保存,再点击首先看仿真软件是不是modelsin-altera,再…
暂无图片
编程学习 ·

Java学习 | 基础知识 - 关键字和标识符

Java基本知识 1、关键字关键字不能用于常量、变量、和任何标识符的名称Java关键字整理类别关键字 说明访问控制private私有的protected受保护的public公共的default默认类、方法和变量修饰符abstract声明抽象class类extends扩充,继承final最终值,不可改变的implements实现(接…
暂无图片
编程学习 ·

Java实现文件浏览器下载

前言:先说下需求,项目需求是用户一点击一个前端页面的链接就可以下载一个压缩包.因为就1个文件,使用文件管理系统像fastDSF,阿里云的OSS这种没必要,直接放在nginx服务器上的怕不好管理,于是给我限定了把文件打包到部署时候的jar包中并实现浏览器下载. 废话不多说,直接上代码! 1…
暂无图片
编程学习 ·

隐秘的角落:张东升的人生,给所有职场人提了个醒

如果说,找一个代名词来形容职场中的中年人,之前可能没有。现在,我想,“张东升”这三个字就够了! 张东升是近期大火的电视剧《隐秘的角落》的主角,在剧中,他有着两种截然不同的模样。 表面上,在学生眼里他是一个才华横溢、带来梦想的数学老师,在同事眼里他是一个忠于妻…
暂无图片
编程学习 ·

java常用面试题——笔试选择题解析

1.以下关于 abstract 关键字的说法,正确的是(D)。 A.abstract 可以与 final 并列修饰同一个类。 B.abstract 类中不可以有 private 的成员。 C.abstract 类中必须全部是 abstract 方法。 D.abstract 方法必须在 abstract 类或接口中。解析: final的类不能被重写和继承;而a…
暂无图片
编程学习 ·

基于小程序请求接口 wx.request 封装的类 axios 请求

基于小程序请求接口 wx.request 封装的类 axios 请求Introductionwx.request 的配置、axios 的调用方式源码戳我 feature支持 wx.request 所有配置项支持 axios 调用方式支持 自定义 baseUrl支持 自定义响应状态码对应 resolve 或 reject 状态支持 对响应(resolve/reject)分别…
暂无图片
编程学习 ·

奥运五环的绘制

#奥运五环的绘制 import turtle turtle.width(10) turtle.color(“blue”) turtle.circle(50) turtle.penup() turtle.goto(120,0) turtle.pendown() turtle.color(“black”) turtle.circle(50) turtle.penup() turtle.goto(240,0) turtle.pendown() turtle.color(“red”) tu…
暂无图片
编程学习 ·

【解惑】到底是“时间片“?还是“分时轮询“?

1、任务调度任务调度对于电子类或者自动化类专业小伙伴最早接触一般都是在接触RTOS后了,然而对于计算机相关专业的小伙伴应该在学《计算机操作系统》老师对这一块讲解的非常清楚了,包括一些性能指标的定义与计算等等,不过作者这里仅仅只针对RTOS进行讲解,大家感兴趣可以找一…
暂无图片
编程学习 ·

金秋十月,再聚蓉城!一展一会,涌动环保新商机!

如果不是……今天会是“第二届中国环博会成都展”与“2020中国环境产业高峰论坛”开幕的日子。现在,两大盛会确定改到10月13-15日,地点仍为中国成都西部国际博览城。在等待的日子里,我们一起来回顾一下去年展会的盛况,再跟朋友们说说今年的最新动态。 品牌环保展落户蓉城 强…
暂无图片
编程学习 ·

PCA(1):基础知识介绍

PCA算法思路:首先利用样本集及特征构建一个样本矩阵,然后利用样本矩阵计算得到一个协方差矩阵,再计算协方差矩阵的特征值和特征向量,保留特征值前k个大的对应的特征向量作为新的维度方向,再将原始样本数据转换到新的空间维度。(他非常巧妙地利用协方差矩阵来计算出样本集…
暂无图片
编程学习 ·

简洁全面的单例模式整理

单例实现 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 1.静态内部类 public class Singleton {private static class SingletonHolder {private static final Singleton INSTANCE = new Singleton();}private Singleton() {}public static final Singleton getIns…
暂无图片
编程学习 ·

操作系统——进程调度算法 python实现

文章目录一、实验内容(1)优先权法、轮转法(2) 算法描述二、流程图(1)优先权法——动态优先级(2)轮转法(RR法)三、实验分析四、完整代码及输出(1)代码(2)输出 一、实验内容 (1)优先权法、轮转法 简化假设 1) 进程为计算型的(无I/O) 2) 进程状态:ready、runni…
暂无图片
编程学习 ·

*win10+anaconda+cuda+cudnn+tensorflow2.1+pycharm安装遇坑全过程

*win10+anaconda+cuda+cudnn+tensorflow2.1+pycharm 1.安装anaconda2019.3 安装过程需要选择环境变量,如下图(左图)。完成安装(learn可以不用勾选)安装完成后win+R 输入cmd后输入conda list 象征性的查看一下就好了,出现以下界面表示安装成功。2.安装cuda 10.0 安装最开…