vue.js中实现在弹框外有鼠标点击事件时隐藏弹框

功能描述：点击按钮popBtn实现弹框pop的显示和隐藏交替；在弹框pop外有鼠标点击事件时需要隐藏弹框pop,但是要除开按钮popBtn。

<div id="pop" v-if="isPop">
  <!-- 其他html元素 -->
</div>

<button id="popBtn" @click="isPop=!isPop">显示或隐藏弹框pop</button>

mounted() {
    // 监听页面的点击事件，如果鼠标在pop弹出框和popBtn按钮外点击，那么让弹出框不显示
    document.onclick = () => {
      let e = e || window.event;
      let elem = e.srcElement || e.target;
      // console.log(elem)
      while (elem) {
        if (elem.id == "pop" || elem.id == "popBtn") {
          return;
        }
        elem = elem.parentNode;
      }
      this.isPop = false;
    };
  },