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字符编码函数区别分析
Jun 05 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
vue中$nextTick的用法讲解
Jan 17 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
解决await在forEach中不起作用的问题
Feb 25 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中文汉字验证码
2007/04/08 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
javascript数组去重小结
2016/03/07 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
大学生实习证明范文(5篇)
2014/09/18 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
考研英语复习计划
2015/01/19 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
一文搞懂php的垃圾回收机制
2021/06/18 PHP
ipad隐藏软件app图标方法
2022/04/19 数码科技
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers