使用场景
在鼠标按下和抬起均位于目标之外时通知宿主。
外部点击关闭
打开局部面板，内部点击不会关闭；点击旁边的外部按钮会关闭。
外部点击关闭
<template>
<AsamButton type="default" native-type="button" @click="open = true">打开面板</AsamButton>
<div v-if="open" v-asam-click-outside="close" class="panel">
<p class="example-paragraph">内部点击保留面板</p>
<AsamButton type="default" native-type="button">内部按钮</AsamButton>
</div>
<AsamButton type="default" native-type="button">外部按钮</AsamButton>
<p class="example-paragraph" role="status">{{ open ? '面板显示' : '面板关闭' }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamClickOutsideBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamClickOutside as vAsamClickOutside } from '@asam-ui/ui';
const open = ref(false);
const close = () => {
open.value = false;
};
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamButton type="default" native-type="button" @click="open = true">打开面板</AsamButton>
<div v-if="open" v-asam-click-outside="close" class="panel">
<p class="example-paragraph">内部点击保留面板</p>
<AsamButton type="default" native-type="button">内部按钮</AsamButton>
</div>
<AsamButton type="default" native-type="button">外部按钮</AsamButton>
<p class="example-paragraph" role="status">{{ open ? '面板显示' : '面板关闭' }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamClickOutsideBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamClickOutside as vAsamClickOutside } from '@asam-ui/ui';
const open = ref(false);
const close = () => {
open.value = false;
};
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
绑定函数接收 mouseup、mousedown 两个原始事件。动态参数可以排除一个元素或元素数组；使用时让排除元素来自本例 refs。组件卸载时指令移除登记。它只判断外部点击，不提供显隐状态或焦点陷阱。
组合职责与生命周期
SFC 命名 vAsamClickOutside 后使用 v-asam-click-outside。真实 mousedown/mouseup 序列始末均位于外部时调用回调，宿主内部及排除元素不触发；绑定值更新替换回调，卸载后移除登记。它只报告外部操作，关闭状态由业务回调决定。
API
指令 AsamClickOutside
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
created | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
beforeMount | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
mounted | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
beforeUpdate | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
updated | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
beforeUnmount | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
unmounted | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
getSSRProps | — | (typeof AsamClickOutside)["getSSRProps"] | — |
deep | — | boolean | undefined | — |
install | — | (app: App) => void | — |
类型 AsamClickOutsideBinding
(mouseup: MouseEvent, mousedown: MouseEvent): void类型 AsamClickOutsideExcludes
类型 AsamClickOutsideDirective
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
created | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
beforeMount | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
mounted | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
beforeUpdate | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
updated | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
beforeUnmount | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
unmounted | — | DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined | — |
getSSRProps | — | (AsamClickOutsideDirective)["getSSRProps"] | — |
deep | — | boolean | undefined | — |
install | — | (app: App) => void | — |
关联组件
参数与事件补充说明
参数与事件说明
created
必填：否；声明来源：依赖声明。
created 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeMount
必填：否；声明来源：依赖声明。
beforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
mounted
必填：否；声明来源：依赖声明。
mounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeUpdate
必填：否；声明来源：依赖声明。
beforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
updated
必填：否；声明来源：依赖声明。
updated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
beforeUnmount
必填：否；声明来源：依赖声明。
beforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
unmounted
必填：否；声明来源：依赖声明。
unmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
getSSRProps
必填：否；声明来源：依赖声明。
getSSRProps 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(typeof AsamClickOutside)["getSSRProps"]>, (...args: never[]) => unknown>>
deep
必填：否；声明来源：依赖声明。
deep 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
install
必填：是；声明来源：ASAM 声明。
install 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(app: App<any>): void
AsamClickOutside 公开类型视图
import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamClickOutsideBinding, AsamClickOutsideExcludes, AsamClickOutsideDirective } from '@asam-ui/ui';
import { AsamClickOutside } from '@asam-ui/ui';
// AsamClickOutside
type PublicContract = {
"created"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"beforeMount"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"mounted"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"unmounted"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"getSSRProps"?: (typeof AsamClickOutside)["getSSRProps"];
"deep"?: boolean | undefined;
"install": (app: App) => void;
};AsamClickOutsideBinding 公开类型视图
import type { AsamClickOutsideBinding } from '@asam-ui/ui';
// AsamClickOutsideBinding
type PublicContract = {
(mouseup: MouseEvent, mousedown: MouseEvent): void;
};基础动态指令参数可以排除一个或多个元素。
此辅助类型包含大型基础声明；完整契约见公开类型视图。
组合契约按分支生效；请同时查看公开类型。
AsamClickOutsideExcludes 公开类型视图
import type { AsamClickOutsideExcludes } from '@asam-ui/ui';
// AsamClickOutsideExcludes
type PublicContract = AsamClickOutsideExcludes;参数与事件说明
created
必填：否；声明来源：依赖声明。
created 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeMount
必填：否；声明来源：依赖声明。
beforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
mounted
必填：否；声明来源：依赖声明。
mounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeUpdate
必填：否；声明来源：依赖声明。
beforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
updated
必填：否；声明来源：依赖声明。
updated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
beforeUnmount
必填：否；声明来源：依赖声明。
beforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
unmounted
必填：否；声明来源：依赖声明。
unmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
getSSRProps
必填：否；声明来源：依赖声明。
getSSRProps 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(binding: DirectiveBinding<AsamClickOutsideBinding, string, AsamClickOutsideExcludes>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(AsamClickOutsideDirective)["getSSRProps"]>, (...args: never[]) => unknown>>
deep
必填：否；声明来源：依赖声明。
deep 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
install
必填：是；声明来源：ASAM 声明。
install 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(app: App<any>): void
AsamClickOutsideDirective 公开类型视图
import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamClickOutsideDirective, AsamClickOutsideBinding, AsamClickOutsideExcludes } from '@asam-ui/ui';
// AsamClickOutsideDirective
type PublicContract = {
"created"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"beforeMount"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"mounted"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"unmounted"?: DirectiveHook<HTMLElement, null, AsamClickOutsideBinding, string, AsamClickOutsideExcludes> | undefined;
"getSSRProps"?: (AsamClickOutsideDirective)["getSSRProps"];
"deep"?: boolean | undefined;
"install": (app: App) => void;
};