vue2如果你希望点击 container 以外的地方也能触发关闭弹框的功能,

你可以将点击事件监听到 document 上,然后在方法中判断点击的位置是否在弹框内部或者是触发弹框的按钮。

vue
<template>
  <div class="container">
    <button @click="openPopup" class="popup-button">打开弹框</button>
    <div v-if="isPopupOpen" class="popup" ref="popup">
      <!-- 弹框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPopupOpen: false
    };
  },
  methods: {
    openPopup() {
      this.isPopupOpen = true;
      document.addEventListener('click', this.onClickOutside);
    },
    closePopup() {
      this.isPopupOpen = false;
      document.removeEventListener('click', this.onClickOutside);
    },
    onClickOutside(event) {
      if (!this.$refs.popup.contains(event.target) && !event.target.classList.contains('popup-button')) {
        this.closePopup();
      }
    }
  }
};
</script>

<style>
.container {
  position: relative;
}

.popup {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

在这个示例中,当打开弹框时会在 document 上添加点击事件监听器,关闭弹框时会移除点击事件监听器。这样无论点击 container 内部还是外部的地方,都能触发关闭弹框的功能。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容