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

第二种万能实现方式

• !!!注意点击列表的时候需要设置阻止冒泡[ @click.stop],即阻止document上的点击方法

html代码
<div class="pagenumlist" >
		//点击显示隐藏下拉列表,需要加个stop修饰符
        <span class="pagenumset" @click.stop="pagenumshow = !pagenumshow">
          {{ page_size }}条/页
        <transition name="fade">
        // 下拉列表
          <ul class="pageslist" v-if="pagenumshow">
            <li v-for="item in pageSizes" :key="item" @click="setcurrent(1, item)">
              {{ item }}条/页
            </li>
          </ul>
        </transition>
      </div>

注意这种方式,需要销毁不然很耗性能

methods: {
	closeMsg() {
	    this.pagenumshow = false
	},
}
mounted() {
    document.addEventListener('click', event => {
        this.closeMsg()
    })
}
// 事件销毁的时候
beforeDestroy() {
    this.closeMsg()
},