vue pop closed (Click shaded)

Introduction:
Most of the time we will have to write pop needs, in addition to click the button to close the outside, with the increase in user-friendliness requirements, click on the shaded part of the bomb out of the window to close pop has become more friendly and interactive experience.

First, pay attention to the problem
before writing the code here to note two points
do not pass parameters within 1. Turn off event! Do not pass parameters! Do not pass parameters!
2. The need to set the height of pop

Second, the code implementation
1, the text content part (mainly into two layers, one transparent region, one content)

<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, pop style, I do not explained directly on the bar code

#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;
    }
  }
}

Results as FIG

. 3, a specific implementation is as follows 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;
        }
      }
    }
  },