vue彈窗關閉（點擊陰影部分）

前言：
大多時候我們都會有寫彈窗的需求、除了點擊按鈕關閉之外，隨着用戶友好性的要求增加、點擊彈窗外部的陰影部分關閉彈窗也成了交互更加友好的體驗。

一、問題注意

寫代碼之前這裏需要注意兩個點
1.關閉事件內不要傳參數！不要傳參數！不要傳參數！
2. 彈窗需要設置高度

二、代碼實現

1、文本內容部分（主要分成兩層、透明區域一層、內容一層）

<div id="common_alert" v-if="show_common_alert" @click="closeMsg">
    <div class="common_alert_box" id="common_alert_box">
      <span @click="close_alert"></span>
      <div v-if="show_common_alert">
        <h3>vue彈窗顯示</h3>
        <img :src="imgUrl" />
        <button @click="close_alert">知道了</button>
      </div>
    </div>
  </div>

2、彈窗樣式我就不說明了直接上代碼吧

#common_alert {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(142, 140, 140, 0.51);
  .common_alert_box {
    position: relative;
    width: 240px;
    height: 411px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    h3 {
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      text-align: center;
      font-family: PingFangSC-regular;
      padding-top: 38px;
    }
    img {
      width: 200px;
      height: 222px;
      margin: 15px auto 33px;
    }
    span {
      width: 15px;
      height: 15px;
      background: url("./static/close.png");
      background-size: 15px;
      position: absolute;
      top: 15px;
      right: 15px;
    }
    .close_alert {
      position: absolute;
      top: 10px;
      right: 15px;
    }
  }
}

效果如下圖

3、具體的vue實現如下所示

 data() {
    return {
      show_common_alert: true
    };
  },
 methods: {
 //關閉按鈕
    close_alert() {
      this.show_common_alert = false;
    },
    // 點擊彈窗之外的地方關閉彈窗
    closeMsg(el) {
    //獲取彈窗節點
      var con = document.getElementById("common_alert_box");
      if (con) {
      //判斷如果不是當前節點就隱藏彈窗
        if (!con.contains(el.target)) {
          this.show_common_alert = false;
        }
      }
    }
  },