Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。
四种触发方式：悬停，点击，聚焦，手动
Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
trigger |
触发方式 |
String |
click/focus/hover/manual |
click |
title |
标题 |
String |
— |
— |
content |
显示的内容，也可以通过 |
String |
— |
— |
width |
宽度 |
String, Number |
— |
最小宽度 150px |
placement |
出现位置 |
String |
top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |
bottom |
disabled |
Popover 是否可用 |
Boolean |
— |
false |
value / v-model |
状态是否可见 |
Boolean |
— |
false |
offset |
出现位置的偏移量 |
Number |
— |
0 |
transition |
定义渐变动画 |
String |
— |
fade-in-linear |
visible-arrow |
是否显示 Tooltip 箭头，更多参数可见Vue-popper |
Boolean |
— |
true |
popper-options |
popper.js 的参数 |
Object |
参考 popper.js 文档 |
|
popper-class |
为 popper 添加类名 |
String |
— |
— |
open-delay |
触发方式为 hover 时的显示延迟，单位为毫秒 |
Number |
— |
— |
close-delay |
触发方式为 hover 时的隐藏延迟，单位为毫秒 |
number |
— |
200 |
tabindex |
Popover 组件的 tabindex |
number |
— |
0 |
Slot
参数 |
说明 |
— |
Popover 内嵌 HTML 文本 |
reference |
触发 Popover 显示的 HTML 元素 |
Events
事件名称 |
说明 |
回调参数 |
show |
显示时触发 |
— |
after-enter |
显示动画播放完毕后触发 |
— |
hide |
隐藏时触发 |
— |
after-leave |
隐藏动画播放完毕后触发 |
— |
使用hover
<el-popover placement="top-start" width="600" trigger="hover">
<div v-html="row.content" v-viewer class="ql-editor v-html_conentz"></div>
<el-link :underline="false" slot="reference" style="color: #1e90ff">查看通知内容</el-link>
</el-popover>可以嵌套不同的元素比如el-tag、el-table、el-button等
<el-popover placement="top-start" width="600" trigger="click">
<el-tag
style="margin-right: 10px; margin-top: 10px"
type="info"
v-for="item in row.orgTypeSignNames.split(',')"
>
{{ item }}
</el-tag>
<el-link
:underline="false"
slot="reference"
style="color: #1e90ff"
>点击查看</el-link
>
</el-popover>