Popup 弹出框

Popup 组件用于在页面中弹出一个浮层，可以包含任意内容，支持多种触发方式和位置控制。

参数

Props

名称	类型	默认值	描述
visible	boolean	false	是否显示弹窗
trigger	TriggerType	'click'	触发方式
reference	Element | string | null	null	手动触发的 reference
placement	PlacementType	'bottom'	弹出位置
offset	number	8	弹窗内容与触发元素的距离
showArrow	boolean	true	是否显示箭头
transitionName	TransitionName | false	'x-fade'	过渡动画名称
showDelay	number	100	移入延迟时间(ms)
hideDelay	number	100	移出延迟时间(ms)
disabled	boolean	false	是否禁用
hideOnClick	boolean	true	点击外部是否关闭
enterable	boolean	true	是否可以移入弹窗
appendTo	AppendTo	'body'	挂载节点
esc	boolean	true	是否在按下 Esc 键时关闭
lockScroll	boolean	false	是否锁定滚动
autoFocus	boolean	true	是否自动聚焦第一个可聚焦元素
restoreFocus	boolean	true	关闭时是否恢复焦点
alignWidth	boolean	true	是否对齐触发元素的宽度
popupClass	XClass	''	弹出层样式类
popupStyle	XStyle	''	弹出层样式

Slots

名称	描述	参数
default	触发元素	-
content	弹出内容	-

Events

名称	描述	参数
update:visible	可见状态变化时触发	(visible: boolean) => void
show	显示前触发	-
shown	A显示后触发	-
hide	隐藏前触发	-
hidden	隐藏后触发	-
click-outside	点击外部时触发	(event: MouseEvent) => void

示例

基础用法

基础的弹出框用法。

不同触发方式

Popup 支持多种触发方式：点击、悬停、右键和手动。

挂载节点

可以指定弹出框挂载的位置。

不同位置

Popup 支持12个不同的弹出位置。

过渡动画

可以使用不同的过渡动画效果。

事件

Popup 提供了一系列事件来监听其状态变化。

TypeScript

// 触发方式
export type TriggerType =
  | "hover"
  | "click"
  | "focus"
  | "contextmenu"
  | "manual";

// 弹出位置
export type PlacementType =
  | "top"
  | "top-start"
  | "top-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end"
  | "right"
  | "right-start"
  | "right-end";

// 动画名称
export type TransitionName =
  | "x-fade"
  | "x-zoom"
  | "x-slide"
  | "x-slide-up"
  | "x-slide-down"
  | "x-slide-left"
  | "x-slide-right";

// 挂载节点类型
export type AppendTo = HTMLElement | "body" | null;