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 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
chrome原生方法之数组
Nov 30 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
微信小程序 form组件详解
Oct 25 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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使用websocket示例详解
2014/03/12 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
封装html的select标签的js操作实例
2013/07/02 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python3中property使用方法详解
2019/04/23 Python
python pycharm的安装及其使用
2019/10/11 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
django使用graphql的实例
2020/09/02 Python
Python日志器使用方法及原理解析
2020/09/27 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
什么是Smart Navigation?
2016/07/03 面试题
回门宴答谢词
2014/01/13 职场文书
二年级语文教学反思
2014/02/02 职场文书
2015年女工委工作总结
2015/07/27 职场文书
《圆的面积》教学反思
2016/02/19 职场文书