Skip to content

Popover 气泡卡片

  1. 点击元素,弹出气泡式框。
  2. 高扩展性的气泡卡片。

基础用法

位置

主题

API

Popover props

属性名说明类型默认值
trigger触发方式hover click
persistent设置为 false 时, Popper会根据open的值动态添加 删除节点, 否则它只是被隐藏了booleantrue
offset出现位置的偏移量number6
placement出现的位置stringbottom
strategy描述要使用的定位策略。默认情况下,它是absolutestringabsolute
visible受控模式,来控制它的显示与关闭boolean
hideAfterTime消失的延迟,以毫秒为单位(这个的意义主要是延迟切换,不然hover到下拉菜单节点时,菜单就影藏了)number200
showAfterTime出现延迟,以毫秒为单位number0
transition动画名称string
disabled是否禁止booleanfalse
popperClasspopper 添加类名string
popperStylepopper添加stylevue“StyleValue”
zIndexpopper层级number
getPopupContainer菜单挂载的节点。默认挂载body上, 方法参数是当前触发器节点;如果想挂载到触发器节点下,可以返回这个node参数Function(node:HTMLElement) => void

Popover Events

属性名说明类型
hidepopup消失时触发Function
showpopup显示时触发Function

Popover defineExpose

名称说明类型
popperReffb-popper 组件实例object
onOpenonOpen 方法控制显示状态Function
onCloseonClose 方法控制显示状态, 可以传递一个time来覆盖hideAfterTime,为0时立马关闭弹窗Function(time) => void
updatePopper使用popperRef.contentRef.updatePopper()更新位置Function

Slots

插槽名说明
default触发 & 引用的元素
popup对话框标题的内容