Popover 气泡卡片

基础用法

trigger 属性被用来决定 popover 的触发方式，支持的触发方式： hover、click

Details

<template>
  <ASpace>
    <APopover title="Title" content="this is content, this is content, this is content" placement="top" trigger="hover"
      width="200px">
      <template #reference>
        <a-button type="primary">Hover to activate</a-button>
      </template>
    </APopover>
    <APopover trigger='click' title="Title" width="200px" content="this is content, this is content, this is content">
      <template #reference>
        <a-button type="primary">Click to activate</a-button>
      </template>
    </APopover>
  </ASpace>
</template>

受控模式

如果你想手动控制显示与隐藏，可以设置 visible 属性。

Details

<template>
  <APopover
    :visible="popoverVisible"
    title="Title"
    width="200px"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <a-button @click="popoverVisible = !popoverVisible" type="primary">Manual to activate</a-button>
    </template>
  </APopover>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const popoverVisible = ref(false)
</script>

内容可扩展

可以在 Popover 中嵌套其它组件， 以下为嵌套表格的例子。

Details

<template>
  <APopover
    width="500px"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <a-button type="primary">Click to activate</a-button>
    </template>
    <a-table class="vp-row" :data="tableData.tBody" :columns="tableData.tHead">
    </a-table>
  </APopover>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const tableData = ref({
  tHead: [
    {
      key: "id",
      title: "学号",
    },
    {
      key: "name",
      title: "姓名",
    },
    {
      key: "age",
      title: "年龄",
    },
    {
      key: "chinese",
      title: "语文",
    },
    {
      key: "math",
      title: "数学",
    },
    {
      key: "english",
      title: "英语",
    },
  ],
  tBody: [
    {
      id: 1,
      name: "Yjj",
      age: 21,
      chinese: 121,
      math: 90,
      english: 138,
    },
    {
      id: 2,
      name: "嘿毛",
      age: 20,
      chinese: 111,
      math: 32,
      english: 43,
    },
    {
      id: 3,
      name: "big龙",
      age: 19,
      chinese: 44,
      math: 21,
      english: 11,
    },
    {
      id: 4,
      name: "嫖瓜",
      age: 21,
      chinese: 80,
      math: 40,
      english: 45,
    },
  ],
});
</script>

Slots

属性名	说明
-	Popover 内嵌 HTML 文本
reference	触发 Popover 显示的 HTML 元素

Attributes

属性名	说明	类型	可选值	默认值
trigger	触发方式	string	click/hover	hover
title	标题	string	—	—
content	显示的内容，也可以通过写入默认 slot 修改显示内容	string	—	—
width	宽度	string	—	150px
placement	出现位置	string	top/left/bottom/right	bottom
visible	Popover 是否显示	Boolean	—	null