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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
Java 生成随机字符的示例代码
Jan 13 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通用检测函数集合
2011/02/08 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP实现小偷程序实例
2016/10/31 PHP
详解php中的implements 使用
2017/06/13 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
下载给定网页上图片的方法
2014/02/18 Python
python集合类型用法分析
2015/04/08 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python中的闭包函数
2018/02/09 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
2019史上最全Database工程师题库
2015/12/06 面试题
《鸟岛》教学反思
2014/04/26 职场文书
秋天的雨教学反思
2014/04/27 职场文书
导游词范文
2015/02/13 职场文书
独生子女证明范本
2015/06/19 职场文书
大学生见习总结报告
2015/06/24 职场文书
污染环境建议书
2015/09/14 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书