VueUse OnClickOutside结合Teleport：如何避免点击模态框内部关闭弹窗？

问题原因 #

你当前的代码把OnClickOutside绑定在组件内的一个div上，但模态框通过<teleport>渲染到了<body>，和绑定的div不在同一DOM层级。点击模态框内部时，指令会判定为点击了绑定元素的外部，从而触发关闭逻辑。

解决方法 #

方法一：将OnClickOutside直接绑定到模态框内部元素

把OnClickOutside指令移到模态框组件内部，直接绑定到模态框的根元素上，这样指令就能正确识别模态框的内部区域：

模态框组件示例（以update-time-slot-modal为例）：

<template>
  <teleport to="body">
    <OnClickOutside @trigger="emit('close')">
      <div class="modal">
        <!-- 模态框内容 -->
        <button @click="handleUpdate">确认修改</button>
      </div>
    </OnClickOutside>
  </teleport>
</template>

<script setup>
import { OnClickOutside } from '@vueuse/components'
const emit = defineEmits(['close', 'update'])

const handleUpdate = () => {
  // 执行更新逻辑
  emit('update')
  emit('close')
}
</script>

父组件中监听close事件控制显示：

<template>
  <div v-if="moreInfo" class="absolute top-100 right-0 bg-white z-20">
    <update-time-slot-modal 
      :timeslot="timeSlot" 
      @update="updateTimeSlot"
      @close="moreInfo = false"
    />
    <delete-time-slot-modal 
      @delete="deleteTimeSlot(timeSlot.id)"
      @close="moreInfo = false"
    />
  </div>
</template>

方法二：在父组件中通过exclude选项排除模态框元素

如果需要在父组件统一处理关闭逻辑，可以给模态框元素添加唯一类名，或者获取模态框的ref，通过OnClickOutside的exclude选项排除这些元素：

1. 给模态框根元素添加类名：

<!-- update-time-slot-modal组件 -->
<teleport to="body">
  <div class="modal-content">
    <!-- 模态框内容 -->
  </div>
</teleport>

2. 父组件中使用exclude指定排除的类选择器：

<template>
  <div v-if="moreInfo" class="absolute top-100 right-0 bg-white z-20">
    <update-time-slot-modal :timeslot="timeSlot" @update="updateTimeSlot"/>
    <delete-time-slot-modal @delete="deleteTimeSlot(timeSlot.id)"/>
  </div>
  <OnClickOutside 
    @trigger="moreInfo = false"
    :exclude="'.modal-content'"
  />
</template>

或者通过ref获取模态框元素：

<template>
  <div v-if="moreInfo" class="absolute top-100 right-0 bg-white z-20">
    <update-time-slot-modal ref="updateModal" :timeslot="timeSlot" @update="updateTimeSlot"/>
    <delete-time-slot-modal ref="deleteModal" @delete="deleteTimeSlot(timeSlot.id)"/>
  </div>
  <OnClickOutside 
    @trigger="moreInfo = false"
    :exclude="[updateModal?.$el, deleteModal?.$el]"
  />
</template>

<script setup>
import { ref } from 'vue'
const moreInfo = ref(false)
const updateModal = ref(null)
const deleteModal = ref(null)
</script>

关键说明 #

OnClickOutside默认以绑定指令的元素作为"内部区域"判断基准，当模态框通过Teleport脱离原DOM树后，必须让指令明确知道哪些元素属于需要排除的内部区域，才能避免误触发关闭。

内容的提问来源于stack exchange，提问作者Madriesen