ExUI

Appearance

Popover 气泡卡片 ​

点击/鼠标移入元素，弹出气泡式的卡片浮层。带有霓虹发光效果的赛博朋克主题气泡卡片组件。

基础用法 ​

最简单的用法，鼠标点击时显示气泡卡片。

vue
<template>
  <ExPopover content="这是一段内容" title="标题">
    <ExButton>点击显示</ExButton>
  </ExPopover>
</template>

不同位置 ​

通过 placement 属性可以设置气泡卡片的显示位置，支持 12 个方向。

vue
<template>
  <ExPopover content="Top 内容" title="Top" placement="top">
    <ExButton>上边</ExButton>
  </ExPopover>
  
  <ExPopover content="Bottom 内容" title="Bottom" placement="bottom">
    <ExButton>下边</ExButton>
  </ExPopover>
</template>

触发方式 ​

通过 trigger 属性可以设置不同的触发方式。

vue
<template>
  <ExPopover content="鼠标悬停触发" title="Hover" trigger="hover">
    <ExButton>悬停触发</ExButton>
  </ExPopover>
  
  <ExPopover content="点击触发" title="Click" trigger="click">
    <ExButton>点击触发</ExButton>
  </ExPopover>
  
  <ExPopover content="聚焦触发" title="Focus" trigger="focus">
    <ExButton>聚焦触发</ExButton>
  </ExPopover>
</template>

自定义内容 ​

通过插槽可以自定义气泡卡片的内容。

vue
<template>
  <ExPopover>
    <template #title>
      <div style="display: flex; align-items: center; gap: 8px;">
        <img src="icon.svg" alt="图标" width="16" height="16" />
        <span>自定义标题</span>
      </div>
    </template>
    <template #content>
      <div>
        <p>这是自定义的内容区域</p>
        <div>
          <ExButton size="small" type="primary">确定</ExButton>
          <ExButton size="small">取消</ExButton>
        </div>
      </div>
    </template>
    <ExButton type="primary">自定义内容</ExButton>
  </ExPopover>
</template>

自定义宽度 ​

通过 width 属性可以设置气泡卡片的宽度。

vue
<template>
  <ExPopover content="默认宽度的气泡卡片" title="默认宽度">
    <ExButton>默认宽度</ExButton>
  </ExPopover>
  
  <ExPopover :width="300" content="自定义宽度 300px 的气泡卡片" title="300px">
    <ExButton>宽度 300px</ExButton>
  </ExPopover>
</template>

手动控制 ​

通过 v-model 可以手动控制气泡卡片的显示和隐藏。

vue
<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <ExButton @click="visible = true">显示</ExButton>
  <ExButton @click="visible = false">隐藏</ExButton>
  
  <ExPopover content="手动控制的气泡卡片" title="手动控制" v-model="visible" trigger="manual">
    <ExButton>目标元素</ExButton>
  </ExPopover>
</template>

赛博朋克主题示例 ​

展示赛博朋克场景中的气泡卡片应用。

vue
<template>
  <ExPopover placement="top" :width="280">
    <template #title>
      <div style="display: flex; align-items: center; gap: 8px;">
        <img src="icon.svg" alt="玩家" width="16" height="16" />
        <span>玩家信息</span>
      </div>
    </template>
    <template #content>
      <div>
        <div style="display: flex; align-items: center; gap: 12px;">
          <ExAvatar size="large">P1</ExAvatar>
          <div>
            <div>Player001</div>
            <div>等级 50 • 战士</div>
          </div>
        </div>
      </div>
    </template>
    <ExButton type="primary">玩家信息</ExButton>
  </ExPopover>
</template>

API ​

Popover Props ​

参数说明类型默认值
title标题string—
content内容string—
placement出现位置'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end''top'
trigger触发方式'hover' | 'click' | 'focus' | 'manual''click'
show-arrow是否显示箭头booleantrue
disabled是否禁用booleanfalse
offset偏移量（像素）number12
width宽度string | number'auto'
transition过渡动画名称string'ex-popover-fade'
open-delay延迟显示（毫秒）number0
close-delay延迟隐藏（毫秒）number200
custom-class自定义类名string—
z-index层级number2000
v-model手动控制显示boolean—
aria-label无障碍标签string—

Popover Events ​

事件名说明类型
show显示时触发() => void
hide隐藏时触发() => void

Popover Slots ​

插槽名说明
default触发元素
title自定义标题
content自定义内容

Popover Methods ​

方法名说明类型
show显示气泡卡片() => void
hide隐藏气泡卡片() => void
updatePosition更新位置() => void

与 Tooltip 的区别 ​

  • Tooltip：轻量级，用于简短的文字提示，默认悬停触发
  • Popover：功能更丰富，可以承载复杂内容（如表单、列表等），默认点击触发

无障碍支持 ​

  • 使用 role="dialog" 标记气泡卡片
  • 完整的 ARIA 属性支持
  • 支持键盘导航
  • 支持屏幕阅读器
  • 点击外部自动关闭

主题定制 ​

可以通过 CSS 变量自定义气泡卡片样式：

css
:root {
  --ex-popover-bg: var(--ex-color-bg-elevated);
  --ex-popover-border: var(--ex-color-border-primary);
  --ex-popover-shadow: var(--ex-shadow-xl);
}