f098a1bb8c
Change-Id: Ib18b92ff647ce1eed4676d84d994c51105393bea
3.2 KiB
3.2 KiB
Popover 气泡提示
示例
风格
可选的 ui
属性值:s
/ m
。
定位
使用 position
属性来指定气泡显示的位置。
触发时机
使用 trigger
属性来指定显示/隐藏气泡的时机。
标题区域和操作区域
使用 foot
属性开启底部操作区,使用 ok-label
属性和 cancel-label
属性来设置气泡的按钮内容。使用 foot
插槽来自定义底部操作区。
API
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
ui |
string= |
- | [^ui] |
open |
boolean |
false |
[^open] |
target |
`string | Vue | Node` |
position |
string |
'top' |
[^position] |
trigger |
string |
'hover' |
[^trigger] |
hide-delay |
number |
tooltip.hideDelays |
触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 target 后移入气泡进行交互前已经自动关闭。 |
overlay-class |
`string | Array | Object=` |
overlay-style |
`string | Array | Object=` |
title |
string= |
- | 用于自定义标题内容。 |
foot |
boolean |
false |
用于开启底部操作区。 |
ok-label |
string= |
- | “确定”按钮的文字内容。 |
cancel-label |
string= |
- | “取消”按钮的文字内容。 |
^^^ui 预设样式。
+++枚举值
值 | 描述 |
---|---|
s |
小尺寸样式。 |
m |
中尺寸样式。 |
+++ | |
^^^ |
^^^open
:::badges
.sync
:::
是否显示气泡提示。 ^^^
^^^position
指定定位参数。使用 Popper.js 风格的定位语法指定,可参考 Popper.placements
。
^^^
^^^trigger
触发气泡提示的方式。支持指定的值为 v-outside
指令绑定值的 trigger
参数,并支持使用 `${open}-${close}`
语法分别指定触发打开/关闭提示的时机。另外,当 trigger
指定为 custom
时,将不会使用 v-outside
功能自动进行处理。
例如:click
表示点击 target
后打开,在空白处点击时关闭;hover-mousedown
表示光标移入 target
后打开,在空白处按下鼠标时关闭。
^^^
插槽
名称 | 描述 |
---|---|
default |
气泡提示内容。 |
title |
用于自定义标题内容。 |
foot |
用于自定义底部操作区。 |
事件
名称 | 描述 |
---|---|
ok |
点击“确定”按钮时触发。 |
cancel |
点击“取消”按钮时触发。 |