v-click-outside 指令

概述

• 监听元素外点击以触发回调，支持配置 immediate 与 attachOnMount。

示例

查看代码

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(true)

/**
 * 函数：关闭面板
 */
function closePanel() {
  visible.value = false

  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>

<template>
  <!-- 基础：点击外部立即触发回调 -->
  <div v-if="visible" v-click-outside="closePanel" class="panel">
    面板内容
  </div>

  <!-- 配置：不立即触发，指令绑定时不添加监听 -->
  <div v-if="visible" v-click-outside="{ handler: closePanel, immediate: false, attachOnMount: true }" class="panel">
    配置对象用法
  </div>
</template>

组合示例

模式	用法示例	说明
函数模式	v-click-outside="fn"	直接传入处理函数，点击外部时调用 fn
对象模式	v-click-outside="{ handler: fn, immediate: boolean, attachOnMount: boolean }"	支持高级配置： - handler：点击外部时的回调函数 - immediate：是否立即绑定事件（默认 true） - attachOnMount：是否在组件挂载时自动附加监听（默认 true）