Popover 气泡提示

介绍

默认通过 v-model 或实例方法控制显示；也可改为点击、长按触发。

基础用法

不传 trigger 时通过 v-model 或实例方法控制显示。

<vd-popover v-model="show" message="提示消息内容">
  <vd-button @click.stop="show = !show">
    {{ show ? '关闭' : '打开' }}
  </vd-button>
</vd-popover>

const show = ref(false);

点击触发

将 trigger 设置为 click，点击触发容器时切换显示。

<vd-popover trigger="click" message="提示消息内容">
  <vd-button>点击展示</vd-button>
</vd-popover>

浅色风格

通过 theme 设置主题风格，默认为 dark。

<vd-popover trigger="click" theme="light" message="浅色主题提示">
  <vd-button>light</vd-button>
</vd-popover>

长按触发

将 trigger 设置为 longpress，可改为长按触发。

<vd-popover trigger="longpress" message="长按展示提示">
  <vd-button>长按展示</vd-button>
</vd-popover>

弹出位置

通过 position 设置弹出位置。

<vd-popover trigger="click" position="top" message="提示消息内容">
  <vd-button>top</vd-button>
</vd-popover>

API

Props

参数	说明	类型	默认值
v-model	是否展示	boolean	-
message	提示信息	string	-
trigger	触发方式，不传时手动控制	'click' | 'longpress'	-
position	弹出位置	top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end	'top'
theme	主题风格	'dark' | 'light'	'dark'
transition	动画名称	string	'zoom-in'
duration	动画时长，单位 ms	number	300
show-arrow	是否显示箭头	boolean	true
lazy-render	是否懒渲染	boolean	true
close-on-click-outside	点击元素外部后关闭	boolean	true
disabled	是否禁用	boolean	false
z-index	层级	number | string	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	event: MouseEvent
click-outside	点击外部时触发	event: MouseEvent
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Methods

通过 ref 可调用以下方法

方法名	说明	参数
open	打开气泡提示	-
close	关闭气泡提示	-

Slots

名称	说明
default	触发容器
message	提示信息