Popover 气泡卡片
- 点击元素,弹出气泡式框。
- 高扩展性的气泡卡片。
基础用法
位置
主题
API
Popover props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| trigger | 触发方式 | hover click | — |
| persistent | 设置为 false 时, Popper会根据open的值动态添加 删除节点, 否则它只是被隐藏了 | boolean | true |
| offset | 出现位置的偏移量 | number | 6 |
| placement | 出现的位置 | string | bottom |
| strategy | 描述要使用的定位策略。默认情况下,它是absolute | string | absolute |
| visible | 受控模式,来控制它的显示与关闭 | boolean | — |
| hideAfterTime | 消失的延迟,以毫秒为单位(这个的意义主要是延迟切换,不然hover到下拉菜单节点时,菜单就影藏了) | number | 200 |
| showAfterTime | 出现延迟,以毫秒为单位 | number | 0 |
| transition | 动画名称 | string | — |
| disabled | 是否禁止 | boolean | false |
| popperClass | popper 添加类名 | string | — |
| popperStyle | popper添加style | vue“StyleValue” | — |
| zIndex | popper层级 | number | — |
| getPopupContainer | 菜单挂载的节点。默认挂载body上, 方法参数是当前触发器节点;如果想挂载到触发器节点下,可以返回这个node参数 | Function(node:HTMLElement) => void | — |
Popover Events
| 属性名 | 说明 | 类型 |
|---|---|---|
| hide | popup消失时触发 | Function |
| show | popup显示时触发 | Function |
Popover defineExpose
| 名称 | 说明 | 类型 |
|---|---|---|
| popperRef | fb-popper 组件实例 | object |
| onOpen | onOpen 方法控制显示状态 | Function |
| onClose | onClose 方法控制显示状态, 可以传递一个time来覆盖hideAfterTime,为0时立马关闭弹窗 | Function(time) => void |
| updatePopper | 使用popperRef.contentRef.updatePopper()更新位置 | Function |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 触发 & 引用的元素 |
| popup | 对话框标题的内容 |
