（網掛けをクリックして）閉じたポップVUE

はじめに：
私たちは、使いやすさの要件の増加に伴って、外を閉じて、よりフレンドリーでインタラクティブな体験となっている近くのポップに窓の外に爆弾の斜線部分をクリックするボタンをクリックするだけでなく、ポップなニーズを記述する必要がありますほとんどの時間。

まず、問題に注意を払う
ノートにここで2点を、コードを書く前に、
イベントオフ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;
        }
      }
    }
  },