提示说明Tips #

演示 ----------------------- Tips #

基础用法 Tips #

最大宽高设置 Tips、自定义内容 #

演示 ----------------------- Popover #

触发方式 Popover #

trigger 属性被用来决定 popover 的触发方式，支持的触发方式： hover、click，如果你想手动控制需要设置 isOpen 并且设置 trigger="manually"

虚空触发 Popover #

触发元素和展示内容元素是分开的场景，用于多跟元素只需要展示一个popover

主题 #

通过设置 theme 来修改主题，默认值为 light，DarkTransparent 取消了小箭头的展示

自定义内容、优先采用传入的弹出框位置再计算最优位置，触发内容始终再屏幕内 #

通过content可以设置popover中的内容

用具名slot content，代替 tooltip 中的 content 属性

延时触发 #

仅需要在 trigger 为 hover 的时候，鼠标移入的时长超过 mouse-enter-delay 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是 150 毫秒；鼠标移出之后，再经过mouse-leave-delay 毫秒后，Popover 组件才会隐藏，默认值是 100 毫秒。

响应区域 #

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。 如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

事件 #

自定义大小 #

是否显示箭头 #

嵌套的Popover #

文本溢出基础用法 #

文本溢出不同主题 #

## API

Popover Props #

名称	类型	可选值	默认值	说明
content	string	-	-	弹出框的显示内容
is-open	boolean	true | false	false	手动控制弹出状态
trigger	string	click | hover | manually	hover	弹框触发方式
placement	string	'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'	bottom	控制弹框出现的方向
offset	number	-	8	指定相对触发元素的偏移距离
show-animation	boolean	true | false	true	是否显示动画
mouse-enter-delay	number	-	150	仅在 trigger 为 hover 的时候，设置鼠标移入后延时多久才显示 Popover，单位是 ms
mouse-leave-delay	number	-	100	仅在 trigger 为 hover 的时候，设置鼠标移出后延时多久才隐藏 popover，单位是 ms
disabled	string	-	-	Popover 是否可用
popover-class	string | array | object	-	-	为 Popover 添加自定义类名
display-directive	string	show | if	if	条件渲染使用的指令，if 会让内容被使用 v-if 渲染，show 会让内容被使用 v-show 渲染
show-arrow	boolean	true | false	true	是否显示箭头
width	string	-	-	自定义宽度
virtual-triggering	boolean	true |false	false	用来标识虚拟触发是否被启用
virtual-ref	HTMLElement | templateRef	-	-	标识虚拟触发时的触发元素
observer-dom	HTMLElement | templateRef	-	-	需要额外监听的元素
mutation-observer-dom	HTMLElement | templateRef	-	-	需要额外监听DOM树变化的元素
auto-update-position	boolean	-	true	当触发元素或者popover弹框变化时是否需要自动更新popover位置
arrow-overflow	boolean	-	false	是否允许内容超出屏幕
main-axis	boolean	-	true	是否允许沿主轴方向移动
enterable	boolean	-	true	鼠标是否可移入popover
append-to	string	-	body	Popover 挂载到哪个 DOM 元素
z-index	number	-	-	Popover 自定义层级

Popover 插槽 #

名称	说明
default	触发 Popover 显示的元素内容
content	自定义弹出内容

Popover 事件 #

名称	类型	说明
show	-	Popover 显示后触发事件
hide	-	Popover 隐藏后触发事件
clickEvent	(e: Event, type: boolean) => void	Popover 的点击事件，e当前点击项，type点击区域是否和当前组件相关
mouseEnter	(e: Event) => void	Popover 的鼠标移入事件
mouseLeave	(e: Event) => void	Popover 的鼠标移出事件
scroll	(e: Event) => void	Popover 的上级滚动事件

Popover 方法 #

名称	类型	说明
manuallyHide	-	手动隐藏Popover
manuallyOpen	-	手动展开Popover
popoverRef	-	Popover的ref(updatePosition等方法)

v-ellipsis指令参数 属性参考 Popover props #

名称	类型	可选值	默认值	说明
ellipsis-disabled	boolean	-	false	是否禁用(需写在绑定元素上)
theme	string	'dark' | 'light' | 'darkTransparent'	'darkTransparent'	主题
title	string	-	innerHTML	显示的内容
enterable	boolean	-	true	鼠标是否可移入tips
time	munber	-	300	延迟的时间
class	string[]	-	[]	自定义class
y	boolean	-	false	禁用y轴溢出