弹出框 Popover

Popover 用于弹出隐藏的内容。

目前 Popover 和 Tooltip 组件除了样式外几乎是一样的，保留两个组件是出于 UI 设计和代码后续开发的可维护性考虑。

从 UI 角度来说，Tooltip 用于只读短文本提示，Popover 承载更丰富的内容（标题、按钮、表单等）可以让用户完成轻量操作。

基础使用

Popover 弹出框提供 9 种展示位置。

使用 content 属性来设置显示的信息。 由 placement 属性决定弹出的位置。该属性值格式为：[方向]-[对齐位置]，分别是'top'、'right'、'bottom'、'left'、'top-start'、'top-end'、'right-start'、'right-end'、'bottom-start'、'bottom-end'、'left-start'、'left-end'，有四个展示方向，和三种对齐方式，默认的 placement 为 top。

隐藏源代码

触发方式

trigger 属性设置触发方式。

隐藏源代码

受控模式

传入 visible 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultVisible 属性作为默认值。

隐藏源代码

禁用状态

传入 disabled 设置禁用状态，禁用状态下，鼠标事件将不再影响弹出关闭。

隐藏源代码

不展示箭头

传入 arrow 设置是否展示箭头，默认为 true。

隐藏源代码

偏移距离

传入 offset 设置弹出框和触发元素之间的距离。

隐藏源代码

API

PopoverProps

属性	类型	可选	默认值	描述	版本
content	string	是		气泡内容。	0.0.2
visible	boolean | null	是		是否显示气泡（受控）。	0.0.2
defaultVisible	boolean | null	是		默认是否显示气泡（非受控）。	0.0.2
placement	'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'	是	'top'	气泡相对于触发元素的位置。	0.0.2
trigger	'hover' | 'click'	是	'hover'	触发方式。	0.0.2
offset	number	是	8	偏移距离，单位为像素。	0.0.2
variant	'dark' | 'light'	是	'light'	气泡样式变体。	0.0.2
arrow	boolean	是	true	是否显示箭头。	0.0.2
disabled	boolean	是	false	是否禁用气泡。	0.0.2
zIndex	number	是		气泡的 z-index。	0.0.2
root	HTMLElement | string	是	'body'	气泡挂载的元素。	0.0.2
widthEqual	boolean	是	false	气泡与挂载的元素等宽，置于挂载元素上下侧时生效。	0.0.2
contentStyle	CSSProperties	是		内容区域样式。	0.0.2
destroyOnHide	boolean	是	false	是否在隐藏时销毁气泡。	0.0.3
borderRadius	number	是		圆角半径。	0.1.0
animationDuration	number	是	250	弹出 / 收起动画时长。	0.1.5
cascade	boolean	是	false	开启级联模式。开启了级联模式的多个嵌套 Popover 和 Tooltip 可以共存，操作打开新的浮窗不会关闭之前已存在的浮窗。该属性不具备响应式。	0.1.0

PopoverEvents

事件	参数	描述	版本
update:visible	value: boolean	v-model 更新 visible 属性。	0.0.2
close	e: MouseEvent | KeyboardEvent | TouchEvent	气泡关闭时的回调。	0.0.2
open	e: MouseEvent	气泡打开时的回调。	0.0.2

PopoverSlots

插槽	参数	描述	版本
default		触发元素。	0.0.0-beta
content		气泡内容。	0.0.0-beta