vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

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块”：