使用场景
将外部触发元素关联到一个已挂载的 Popover 实例。
外部触发器关联
外部按钮通过公开组件句柄关联气泡；不访问私有实例字段。
外部触发器关联
<template>
<AsamButton type="default" v-if="popover" v-asam-popover="popover" native-type="button"
>外部气泡触发器</AsamButton
>
<AsamPopover
ref="popover"
virtual-triggering
trigger="click"
title="外部触发"
content="面板与触发器分开声明。"
/>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamPopoverDirectiveBasicDemo' });
import { shallowRef } from 'vue';
import { AsamButton, AsamPopover, AsamPopoverDirective as vAsamPopover } from '@asam-ui/ui';
import type { AsamPopoverExpose } from '@asam-ui/ui';
const popover = shallowRef<AsamPopoverExpose>();
</script><template>
<AsamButton type="default" v-if="popover" v-asam-popover="popover" native-type="button"
>外部气泡触发器</AsamButton
>
<AsamPopover
ref="popover"
virtual-triggering
trigger="click"
title="外部触发"
content="面板与触发器分开声明。"
/>
</template>
<script setup>
defineOptions({ name: 'AsamPopoverDirectiveBasicDemo' });
import { shallowRef } from 'vue';
import { AsamButton, AsamPopover, AsamPopoverDirective as vAsamPopover } from '@asam-ui/ui';
const popover = shallowRef();
</script>使用约定
绑定活跃 AsamPopoverExpose 组件句柄（其中包含 popperRef），或通过动态参数提供同样组件句柄。 完整说明。
组合职责与生命周期
该指令只关联已有 Popover 的 popperRef 与外部触发元素；不会创建第二个面板。先挂载获取句柄，再通过指令值或动态参数绑定，并设置 Popover virtualTriggering。触发方式、可见状态和定位仍由 Popover 配置，触发元素与面板配套卸载，结束存活关联。
API
指令 AsamPopoverDirective
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
created | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
beforeMount | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
mounted | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
beforeUpdate | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
updated | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
beforeUnmount | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
unmounted | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
getSSRProps | — | (typeof AsamPopoverDirective)["getSSRProps"] | — |
deep | — | boolean | undefined | — |
install | — | (app: App) => void | — |
类型 AsamPopoverDirectiveBinding
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
popperRef | 浮层实例引用。 | PublicMember<AsamPopoverDirectiveBinding, "popperRef"> | — |
类型 AsamPopoverDirectiveType
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
created | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
beforeMount | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
mounted | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
beforeUpdate | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
updated | — | DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
beforeUnmount | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
unmounted | — | DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined | — |
getSSRProps | — | (AsamPopoverDirectiveType)["getSSRProps"] | — |
deep | — | boolean | undefined | — |
install | — | (app: App) => void | — |
用法与契约补充说明
使用约定
绑定活跃 AsamPopoverExpose 组件句柄（其中包含 popperRef），或通过动态参数提供同样组件句柄。Popover 设置 virtualTriggering，指令把外部元素关联为 virtualRef。先挂载 Popover 再取得 ref；清理时配套卸载触发元素与面板。没有独立面板、内容或 size，面板配置由 AsamPopover 承担。
关联组件
参数与事件补充说明
参数与事件说明
created
必填：否；声明来源：依赖声明。
created 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeMount
必填：否；声明来源：依赖声明。
beforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
mounted
必填：否；声明来源：依赖声明。
mounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeUpdate
必填：否；声明来源：依赖声明。
beforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
updated
必填：否；声明来源：依赖声明。
updated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
beforeUnmount
必填：否；声明来源：依赖声明。
beforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
unmounted
必填：否；声明来源：依赖声明。
unmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
getSSRProps
必填：否；声明来源：依赖声明。
getSSRProps 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(typeof AsamPopoverDirective)["getSSRProps"]>, (...args: never[]) => unknown>>
deep
必填：否；声明来源：依赖声明。
deep 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
install
必填：是；声明来源：ASAM 声明。
install 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(app: App<any>): void
AsamPopoverDirective 公开类型视图
import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamPopoverDirectiveBinding, AsamPopoverDirectiveType } from '@asam-ui/ui';
import { AsamPopoverDirective } from '@asam-ui/ui';
// AsamPopoverDirective
type PublicContract = {
"created"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"beforeMount"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"mounted"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"unmounted"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"getSSRProps"?: (typeof AsamPopoverDirective)["getSSRProps"];
"deep"?: boolean | undefined;
"install": (app: App) => void;
};通过指令值或基础动态参数传入实时组件 ref。
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
popperRef
必填：按分支；声明来源：上游声明。
AsamPopoverDirectiveBinding 公开类型视图
import type { AsamPopoverDirectiveBinding } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamPopoverDirectiveBinding
type PublicContract = AsamPopoverDirectiveBinding;参数与事件说明
created
必填：否；声明来源：依赖声明。
created 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeMount
必填：否；声明来源：依赖声明。
beforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
mounted
必填：否；声明来源：依赖声明。
mounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
beforeUpdate
必填：否；声明来源：依赖声明。
beforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
updated
必填：否；声明来源：依赖声明。
updated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: VNode<any, HTMLElement, { [key: string]: any; }>): void
beforeUnmount
必填：否；声明来源：依赖声明。
beforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
unmounted
必填：否；声明来源：依赖声明。
unmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(el: HTMLElement, binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<any, HTMLElement, { [key: string]: any; }>, prevVNode: null): void
getSSRProps
必填：否；声明来源：依赖声明。
getSSRProps 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(binding: DirectiveBinding<AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding>, vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): ReturnType<Extract<NonNullable<(AsamPopoverDirectiveType)["getSSRProps"]>, (...args: never[]) => unknown>>
deep
必填：否；声明来源：依赖声明。
deep 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
install
必填：是；声明来源：ASAM 声明。
install 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(app: App<any>): void
AsamPopoverDirectiveType 公开类型视图
import type { DirectiveHook, DirectiveBinding, VNode, RendererNode, RendererElement, App } from 'vue';
import type { AsamPopoverDirectiveType, AsamPopoverDirectiveBinding } from '@asam-ui/ui';
// AsamPopoverDirectiveType
type PublicContract = {
"created"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"beforeMount"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"mounted"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"beforeUpdate"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"updated"?: DirectiveHook<HTMLElement, VNode<any, HTMLElement, { [key: string]: any; }>, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"beforeUnmount"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"unmounted"?: DirectiveHook<HTMLElement, null, AsamPopoverDirectiveBinding, string, AsamPopoverDirectiveBinding> | undefined;
"getSSRProps"?: (AsamPopoverDirectiveType)["getSSRProps"];
"deep"?: boolean | undefined;
"install": (app: App) => void;
};