vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍


Posted in Javascript onSeptember 29, 2018

vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。

v-if 是直接删除dom节点, 就是这个div就不存在了

v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在;

实现如下

maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它

<div class="mask" v-show="maskShow" @click="setMaskShow">
</div>

有一个弹框它的显示和遮罩一样,里面有个关闭按钮也可以关闭弹框,函数里只需要将maskShow值取反即可

<div class="child" v-show="maskShow">
 <button @click="setMaskShow">关闭</button>
</div>

其他方法

点击时候触发该方法, 判断点的区域

hidePanel(event) {
  let dom = document.getElementById("child");
  if (dom) {
    if (!dom.contains(event.target)) {
    //这句是说如果我们点击到了id为child以外的区域
      this.maskShow = false;
    }
  }
}

全部代码如下

<template>
  <div class="father">
    <div class="mask" v-show="maskShow" @click="setMaskShow"></div>
    <div class="child" id="child" v-show="maskShow">
      <button @click="setMaskShow">关闭</button>
    </div>
    <button @click="setMaskShow">click</button>
  </div>
</template>

<script>
export default {
  data: function(){
    return {
      maskShow: false,
    }
  },
  methods: {
    setMaskShow(){
      this.maskShow = !this.maskShow;
    }
  }
}
</script>

<style>
.father{
  width: 100%;
  height: 100%;
}
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.3;
}
button{
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.child{
  position: fixed;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 400px;
  top: calc(50% - 200px);
 left: calc(50% - 200px);
  background: #fff;
}
</style>

下面谈谈 Vue.js 里 v-if 与 v-show 的区别

 在 Vue 项目中,v-if 和 v-show 算是两个用得很频繁的指令,很巧的是它俩在表现上也相似,都是动态显示 DOM 元素。不过既然是两个不同指令,肯定会有不同的适用场景,带着好奇,让我们在 Vue 官方文档里一探究竟吧~

对于v-if大家应该不会陌生,不管哪种编程语言都会有 if-else 的流程控制。
例如,在 Java 中:

if (condition) {
  //some code here
} else {
  //some code here, too
}

当然在 Vue.js 中,v-if 也是执行这样的功能。稍有不同的是在 template 中用 v-if 条件渲染一整组,类似地,同时也可使用 v-else 指令来表示 v-if 的 “else块”:

<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

另一个用于根据条件展示元素的选项是 v-show 指令,用法大致一样:

<h1 v-show=true>Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display 属性。
看到这里大家应该对 v-if 与 v-show 的区别有一个简单的概念了。

接下来将会为大家详细介绍两者的不同:

v-if 是”真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
同时 v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 

所以一般来说,v-if 具有更高的切换开销,而 v-show 具有更高的初始渲染开销。

因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 更好。

总结

以上所述是小编给大家介绍的vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个简单的js树形菜单
Dec 09 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
vue使用v-for实现hover点击效果
Sep 29 #Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 #Javascript
iview同时验证多个表单问题总结
Sep 29 #Javascript
浅谈关于iview表单验证的问题
Sep 29 #Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 #Javascript
You might like
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP操作数组相关函数
2011/02/03 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
职业培训师职业生涯规划
2014/02/18 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
美术专业自荐信
2014/07/07 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
2015年企业新年寄语
2014/12/08 职场文书
经理岗位职责
2015/02/02 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
详解Mysql 函数调用优化
2021/04/07 MySQL
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python