Vuetify 3中实现点击页面任意区域关闭v-tooltip的方法

要实现点击页面任意区域关闭已激活的v-tooltip，你可以通过v-model绑定状态结合全局点击事件监听来实现，以下是完整的实现代码：

<template>
  <div class="button-wrapper" ref="tooltipWrapper">
    <v-btn> Open tooltip </v-btn>
    <v-tooltip
      v-model="isTooltipOpen"
      :open-on-click="true"
      :open-on-hover="false"
      activator="parent"
      location="top"
    >
      This is my tool tip message
    </v-tooltip>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 绑定tooltip的显示状态
const isTooltipOpen = ref(false)
// 获取按钮和tooltip的容器引用
const tooltipWrapper = ref(null)

// 处理外部点击事件
const handleOutsideClick = (event) => {
  // 获取tooltip的内容元素
  const tooltipContent = document.querySelector('.v-tooltip__content')
  // 判断点击区域是否在按钮容器和tooltip内容之外
  if (tooltipWrapper.value && !tooltipWrapper.value.contains(event.target) && 
      tooltipContent && !tooltipContent.contains(event.target)) {
    isTooltipOpen.value = false
  }
}

// 组件挂载时添加全局点击监听
onMounted(() => {
  document.addEventListener('click', handleOutsideClick)
})

// 组件销毁时移除监听，避免内存泄漏
onUnmounted(() => {
  document.removeEventListener('click', handleOutsideClick)
})
</script>

关键说明： #

• 使用v-model="isTooltipOpen"接管tooltip的显示状态，让我们可以手动控制开关。
• 通过tooltipWrapper引用判断点击是否在激活按钮的范围内，避免点击按钮时误关闭。
• 检查tooltipContent确保点击tooltip内容本身不会触发关闭。
• 务必在组件销毁时移除全局事件监听，防止内存泄漏。

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