点击/鼠标移入元素,弹出气泡式的卡片浮层。
# 何时使用
- 当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。
- 和 Tooltip 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。
import { HiPopover } from 'hi-kits/popover'
1
# 基本用法
最简单的用法,浮层的大小由内容区域决定。
Copy
# 不可用
Copy
# 自定义content
自定义删除后无法撤销
删除后无法撤销
删除后无法撤销
这是一段提示提示提示提示提示
这是一段提示
这是一段提示
Copy
# 触发方式
鼠标移入、聚集、点击。
Copy
# h-popover
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
dir | 展示方向 | string | 'top' | 'right' | 'bottom' | 'left' | 'topleft' | 'topright' | 'righttop' | 'rightbottom' | 'bottomleft' | 'bottomright' | 'lefttop' | 'leftbottom' | 'auto' | bottom |
disabled | 是否可用 | boolean | - | false |
accomplish | 是否直接打开 | boolean | - | false |
trigger | 触发方式 | string | 'hover' | 'focus' | 'contextmenu' | 'click' | - |
type | 类型 | string | 'confirm' | 'nomal' | nomal |
content | 内容 | string | - | - |
oktext | 确定文案 | string | - | 确 定 |
canceltext | 取消文案 | string | - | 取 消 |
loading | 加载状态 | boolean | - | false |
hOk | 点击确认回调函数 | string | Function | - | - |
# h-popcon
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
stopfocus | 聚焦 | boolean | - | false |
disabled | 是否可用 | boolean | - | false |
ptitle | 标题 | string | - | - |
type | 类型 | string | 'confirm' | 'nomal' | nomal |
oktext | 确定文案 | string | - | 确 定 |
canceltext | 取消文案 | string | - | 取 消 |
trigger | 触发方式 | string | 'hover' | 'focus' | 'contextmenu' | 'click' | - |
loading | 加载状态 | boolean | - | false |
popoverVisible | 控制popover展示与否 | boolean | - | false |
hOk | 点击确认回调函数 | string | Function | - | - |