docs_vue2/one/docs/components/popover.md
xiaodemen 0b7c8fd460 docs: add docs for Accordion/Collapse/Popover
Change-Id: Ibb023741445c134973a2ea993c498f02d83f3a98
2021-11-20 13:25:23 +08:00

3.1 KiB

Popover 气泡提示

示例

风格

可选的 ui 属性值:s / m

定位

使用 position 属性来指定气泡显示的位置。

触发时机

使用 trigger 属性来指定显示/隐藏气泡的时机。

标题区域和操作区域

使用 title 属性或title 插槽来指定气泡的标题。

使用 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 用于自定义底部操作区。