Vue点击在弹窗外部实现一键关闭的示例代码

<template>
  <div class="modal" v-if="show" @click.stop="stopPropagation">
    <div class="modal-content" @click.prevent>
      <!-- 弹窗内容 -->
      <button @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    closeModal() {
      this.show = false;
    },
    stopPropagation(event) {
      // 阻止事件冒泡，确保点击事件只在弹窗内容区域被捕获
      event.stopPropagation();
    },
  },
  // 注意：这里没有监听全屏点击事件，因为我们会在父组件中处理
};
</script>

<style scoped>
/* 样式略 */
</style>

<template>
  <div @click="handleOutsideClick">
    <!-- 其他内容 -->
    <MyModal ref="modal" />
  </div>
</template>

<script>
import MyModal from './MyModal.vue';

export default {
  components: {
    MyModal,
  },
  methods: {
    handleOutsideClick(event) {
      // 获取弹窗元素
      const modal = this.$refs.modal.$el;

      // 判断点击事件是否发生在弹窗外部
      if (!modal.contains(event.target)) {
        // 调用弹窗的关闭方法
        this.$refs.modal.closeModal();
      }
    },
  },
};
</script>