v-clickout

点击元素外部时触发回调函数的指令。

基础用法

点击元素外部区域时触发指定的回调函数。常用于弹窗、下拉菜单等需要点击外部关闭的场景。

这是弹窗内容
点击外部区域关闭

查看代码

<template>
  <div class="clickout-demo">
    <div v-clickout="handleClickOutside" :class="['popup', { active: isVisible }]">
      <button @click="isVisible = !isVisible">
        {{ isVisible ? '点击外部关闭' : '点击显示弹窗' }}
      </button>
      <div v-show="isVisible" class="popup-content">
        这是弹窗内容
        <br />
        点击外部区域关闭
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vClickout } from '@cp-vuedir/core'

const isVisible = ref(false)

const handleClickOutside = () => {
  if (isVisible.value) {
    isVisible.value = false
  }
}
</script>

<style scoped>
.clickout-demo {
  padding: 2rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  position: relative;
  min-height: 200px;
}

.popup {
  display: inline-block;
}

.popup button {
  padding: 8px 16px;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.popup button:hover {
  background: var(--vp-c-brand-dark);
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}
</style>

进阶用法

结合鼠标位置显示 tooltip。点击安全区域外的任何位置，都会在点击处显示提示信息。

安全区域

点击外部区域查看效果

查看代码

<template>
  <div class="tooltip-demo" ref="demoRef">
    <div class="safe-area" v-clickout="handleClickout">
      <h4>安全区域</h4>
      <p>点击外部区域查看效果</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vClickout } from '@cp-vuedir/core'
import { Message } from '@arco-design/web-vue'

const demoRef = ref<HTMLElement | null>(null)

const handleClickout = (event: MouseEvent) => {
  if (demoRef.value && demoRef.value.contains(event.target as Node)) {
    Message.info({
      content: '点击了安全区域外部',
      duration: 2000
    })
  }
}
</script>

<style scoped>
.tooltip-demo {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  min-height: 200px;
}

.safe-area {
  width: 200px;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  background: var(--vp-c-bg-soft);
  border: 2px dashed var(--vp-c-brand);
  border-radius: 8px;
}

.safe-area h4 {
  margin: 0 0 10px;
  color: var(--vp-c-brand);
}

.safe-area p {
  margin: 0;
  font-size: 14px;
  color: var(--vp-c-text-2);
}

.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: var(--vp-c-brand);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* 消息动画 */
.message-enter-active,
.message-leave-active {
  transition: all 0.3s ease;
}

.message-enter-from,
.message-leave-to {
  opacity: 0;
  transform: translate(-50%, -20px);
}

.message-enter-to,
.message-leave-from {
  opacity: 1;
  transform: translate(-50%, 0);
}
</style>

API

属性名	说明	类型	是否必选	默认值
v-clickout	点击元素外部时触发的回调函数	Function	✓	-

注意事项

注意

• 确保回调函数是一个有效的函数
• 点击事件在捕获阶段处理，以确保优先级
• 指令会自动清理事件监听器
• 如果不需要限制其的点击作用范围，可以不用使用 ref 进行点击区域的判断