气泡卡片 Popover

点击/鼠标移入元素，弹出气泡式的卡片浮层。

何时使用

• 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
• 和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

基本使用

Show Code

<script setup lang="ts"> function openChange (open: boolean) {  console.log('open', open) } </script> <template>  <Popover title="Title" @open-change="openChange">  <template #content>  <p>Content</p>  <p>Content</p>  </template>  <Button type="primary">Hover me</Button>  </Popover> </template>

自定义样式

Show Code

<template>  <Popover  :max-width="180"  bg-color="#000"  :title-style="{ fontSize: '16px', fontWeight: 'bold', color: '#1677ff' }"  :content-style="{ color: '#fff' }"  :tooltip-style="{ padding: '12px 18px', borderRadius: '12px' }"  >  <template #title> Custom Title </template>  <template #content>  <p>Custom Content</p>  <p>Custom Content</p>  </template>  <Button type="primary">Hover me</Button>  </Popover> </template>

不同的触发方式

Show Code

<template>  <Space>  <Popover title="Hover Title">  <template #content>  <p>Content</p>  <p>Content</p>  </template>  <Button type="primary">Hover Me</Button>  </Popover>  <Popover title="Click Title" trigger="click">  <template #content>  <p>Content</p>  <p>Content</p>  </template>  <Button type="primary">Click Me</Button>  </Popover>  </Space> </template>

从浮层内关闭

使用 show 属性控制显示隐藏

Show Code

<script setup lang="ts"> import { ref } from 'vue' const show = ref(false) </script> <template>  <Popover v-model:show="show" title="Click Title" trigger="click">  <template #content>  <a @click="show = false">Close</a>  </template>  <Button type="primary">Click Me</Button>  </Popover> </template>

自定义过渡动画时间

Show Code

<script setup lang="ts"> import { ref } from 'vue' const show = ref(false) </script> <template>  <Popover title="Transition Duration 300ms" :transition-duration="300">  <template #content>  <p>Content</p>  <p>Content</p>  </template>  <Button type="primary">Transition Duration 300ms</Button>  </Popover> </template>

延迟显示隐藏

Show Code

<template>  <Space>  <Popover  :show-delay="300"  :hide-delay="300"  title="delay 300ms"  content="Vue Amazing UI"  >  <Button type="primary">Delay 300ms Popover</Button>  </Popover>  <Popover  :show-delay="500"  :hide-delay="500"  title="delay 500ms"  content="Vue Amazing UI"  >  <Button type="primary">Delay 500ms Popover</Button>  </Popover>  </Space> </template>

隐藏箭头

Show Code

<template>  <Popover :arrow="false" title="Title">  <template #content>  <p>Content</p>  <p>Content</p>  </template>  <Button type="primary">Hide Arrow</Button>  </Popover> </template>

更多使用方式请参考 文字提示 Tooltip

APIs

Popover

参数	说明	类型	默认值
title	卡片标题	string | slot	undefined
titleStyle	卡片标题样式	CSSProperties	{}
content	卡片内容	string | slot	undefined
contentStyle	卡片内容样式	CSSProperties	{}
keyboard	是否支持按键操作 (enter 显示；esc 关闭)	boolean	true
tooltipStyle	设置弹出提示的样式	CSSProperties	{}

更多属性请参考 Tooltip

Slots

名称	说明	类型
title	自定义卡片标题	v-slot:title
content	自定义卡片内容	v-slot:content
default	自定义内容	v-solt:default

Events

名称	说明	类型
openChange	显示隐藏的回调	(open: boolean) => void