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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
window.location.hash知识汇总
Nov 09 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 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 彩色文字实现代码
2009/06/29 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
对比分析json及XML
2014/11/28 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
简单解决Python文件中文编码问题
2015/11/22 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
我的中国心演讲稿
2014/09/04 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年财政工作总结
2014/12/10 职场文书
入党个人总结范文
2015/03/02 职场文书
大学入学感言
2015/08/01 职场文书
怎样写好工作计划
2019/04/10 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
MySQL如何解决幻读问题
2021/08/07 MySQL
Java SSM配置文件案例详解
2021/08/30 Java/Android
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL