Vue Amazing UI

Appearance

3.9.2

气泡卡片 Popover ​

赞助

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

何时使用 ​

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

基本使用 ​

Hover me
Show Code
vue
<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>

自定义样式 ​

Hover me
Show Code
vue
<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>

弹出位置 ​

通过 placement 指定方向；复合方向（如 topLeft）配合 arrowPointAtCenter 可让箭头指向触发元素中心，空间不足时 flip 会自动翻转


placement:
topLeft
top
topRight
bottomLeft
bottom
bottomRight
Adjust Placement
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const placements = ['topLeft', 'top', 'topRight', 'bottomLeft', 'bottom', 'bottomRight']
const placement = ref('top')
</script>
<template>
  <Flex vertical>
    <Space align="center">
      placement:
      <Segmented v-model:value="placement" :options="placements" />
    </Space>
    <Popover :placement="placement" title="Title">
      <template #content>
        <p>Content</p>
      </template>
      <Button type="primary">Adjust Placement</Button>
    </Popover>
  </Flex>
</template>

箭头指向 ​

设置 arrowPointAtCenter 后，箭头将指向目标元素中心，仅当 placement 为复合方向（如 topLeft）时生效


Align edge
Arrow points to center
Show Code
vue
<template>
  <Space>
    <Popover placement="topLeft" title="Title" content="Vue Amazing UI">
      <Button type="primary">Align edge</Button>
    </Popover>
    <Popover placement="topLeft" arrow-point-at-center title="Title" content="Vue Amazing UI">
      <Button type="primary">Arrow points to center</Button>
    </Popover>
  </Space>
</template>

不同的触发方式 ​

click 触发时再次点击触发器收起；click / contextmenu 触发时点击浮层之外或按 esc 关闭（与 文字提示 Tooltip 一致）


Hover Me
Click Me
Show Code
vue
<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>

受控显示 ​

使用 v-model:open 控制显隐；openControl 为真时 trigger: hover 不再驱动显隐，显隐完全由 open 决定


Controlled: false
Toggle Open
Hover (openControl)
Toggle Open (openControl)
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const controlledOpen = ref(false)
const openControlOpen = ref(false)
</script>
<template>
  <Space vertical :gap="12">
    <Space>
      <Popover v-model:open="controlledOpen" title="Click Title" trigger="click">
        <template #content>
          <a @click="controlledOpen = false">Close</a>
        </template>
        <Button>Controlled: {{ controlledOpen }}</Button>
      </Popover>
      <Button type="primary" @click="controlledOpen = !controlledOpen">Toggle Open</Button>
    </Space>
    <Space>
      <Popover v-model:open="openControlOpen" open-control trigger="hover" title="Controlled Only">
        <template #content>
          <p>悬停不会展开，只有 open 为真才显示</p>
        </template>
        <Button>Hover (openControl)</Button>
      </Popover>
      <Button type="primary" @click="openControlOpen = !openControlOpen">Toggle Open (openControl)</Button>
    </Space>
  </Space>
</template>

自定义过渡动画时间 ​

Transition Duration 300ms
Show Code
vue
<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>

延迟显示隐藏 ​

Delay 300ms Popover
Delay 500ms Popover
Show Code
vue
<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>

隐藏后卸载 ​

设置 destroyOnHide 后，浮层在离开动画结束时卸载 DOM，再次显示时重新创建并定位；默认 false（元素常驻，仅切换显示）


Hover (destroyOnHide)
Hover (default)
Show Code
vue
<template>
  <Space>
    <Popover title="Title" content="Vue Amazing UI" destroy-on-hide>
      <Button type="primary">Hover (destroyOnHide)</Button>
    </Popover>
    <Popover title="Title" content="Vue Amazing UI">
      <Button>Hover (default)</Button>
    </Popover>
  </Space>
</template>

隐藏箭头 ​

Hide Arrow
Show Code
vue
<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 Props ​

名称说明类型默认值
title卡片标题stringundefined
titleStyle卡片标题样式CSSProperties{}
content卡片内容stringundefined
contentStyle卡片内容样式CSSProperties{}
tooltipStyle设置弹出提示的样式CSSProperties{}

与 Tooltip 的差异 ​


Popover 完整继承 Tooltip Props 及对应的 Events / Methods（类型 PopoverProps 即 Omit<TooltipProps, …> 叠加自有字段），<Popover trigger="click"> 这类写法与 <Tooltip trigger="click"> 等价。

下表只列与 Tooltip 不同的部分，其余属性、事件与方法见 文字提示 Tooltip：

名称与 Tooltip 的差异
title / contentPopover 自有属性，分别表示卡片标题 / 卡片内容，与 Tooltip 的同名属性无关
contentStylePopover 自有属性，作用于卡片内容区（Tooltip 的 contentStyle 作用于触发器包裹层）
tooltipStyle作用于卡片容器，内置 padding: 12px / border-radius: 8px 与左对齐文案，可覆盖
tooltipClass可用，类名落在卡片容器上（与 tooltipStyle 同节点）
contentClass不可用（类型上已从 PopoverProps 剔除），请改用 contentStyle 或 #content 插槽
tooltip不可用：卡片内容由本组件渲染，请改用 title / content 或同名插槽
maxWidth默认 'auto'（Tooltip 为 240）
bgColor默认 var(--va-bg-elevated-color)，与浮层底板同色（Tooltip 为 var(--va-bg-spotlight-color)）
transitionDuration默认 200（Tooltip 为 100）
anchor可用，但传入后不再渲染触发包裹层，触发元素需由使用方自行提供

Slots ​

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

Events ​

名称说明类型
openChange显示隐藏的回调(open: boolean) => void
animationend显示隐藏动画结束时的回调(open: boolean) => void

Released under the MIT License.

Copyright © 2023-present the Muse Catcher