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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 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实现文件上传下载实例
2016/10/18 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
pygame实现非图片按钮效果
2019/10/29 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
学期自我评价
2014/01/27 职场文书
小班下学期评语
2014/05/04 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
本科生自荐信
2014/06/18 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
python munch库的使用解析
2021/05/25 Python
mysql left join快速转inner join的过程
2021/06/30 MySQL
分析Python list操作为什么会错误
2021/11/17 Python