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