# 浮动条组件
# 使用方法
# 鼠标点击触发popover
点击查看代码
<VuePopover trigger="click">
<template #content>
<div>popover内容</div>
</template>
<VueButton>鼠标点击触发popover</VueButton>
</VuePopover>
1
2
3
4
5
6
2
3
4
5
6
# 鼠标悬停触发popover
点击查看代码
<VuePopover trigger="hover">
<template #content>
<div>popover内容</div>
</template>
<VueButton>鼠标悬停触发popover</VueButton>
</VuePopover>
1
2
3
4
5
6
2
3
4
5
6
# popover弹出方向
点击查看代码
<VuePopover>
<template #content>
<div>popover上</div>
</template>
<VueButton>上浮</VueButton>
</VuePopover>
<VuePopover position="bottom">
<template #content>
<div>popover下</div>
</template>
<VueButton>下浮</VueButton>
</VuePopover>.
<VuePopover position="left">
<template #content>
<div>popover左</div>
</template>
<VueButton>左浮</VueButton>
</VuePopover>
<VuePopover position="right">
<template #content>
<div>popover右</div>
</template>
<VueButton>右浮</VueButton>
</VuePopover>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# Popover 多行文字内容 不被父元素overflow遮挡
点击查看代码
<VuePopover style="margin-top: 0;">
<template #content>
<div>popover多行文字内容popover多行文字内容popover多行文字内容popover多行文字内容popover多行文字内容</div>
</template>
<VueButton>显示多行文字提示</VueButton>
</VuePopover>
1
2
3
4
5
6
2
3
4
5
6
# Popover 带关闭按钮
点击查看代码
<VuePopover trigger="hover">
<template #content="{closeEvent}">
<div>popover使用 slotScope 传参给slot</div>
<VueButton @click="closeEvent">关闭</VueButton>
</template>
<VueButton>提供slot事件回调closeEvent</VueButton>
</VuePopover>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 属性列表
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| autoCloseDelay | 自动关闭延迟 | false/number | false/- | 580 |
| position | 位置 | string | top/bottom/left/right | top |
| trigger | 事件触发类型 | string | hover/click | hover |
| zIndex | 弹出框的z-index | number | - | 999 |