Tu View PlusPopover 气泡卡片
鼠标悬停、聚焦或点击在某个组件时，弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。
基础用法
鼠标移入或点击，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。
<template>
<tu-popover title="Title">
<tu-button>悬停</tu-button>
<template #title> 送元二使安西 </template>
<template #content>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</template>
</tu-popover>
</template><template>
<tu-popover title="Title">
<tu-button>悬停</tu-button>
<template #title> 送元二使安西 </template>
<template #content>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</template>
</tu-popover>
</template>触发方式
通过设置 trigger，可以指定不同的触发方式。
<template>
<tu-popover title="送元二使安西">
<tu-button>悬停</tu-button>
<template #content>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</template>
</tu-popover>
<tu-popover title="送元二使安西" trigger="click">
<tu-button>点击</tu-button>
<template #content>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</template>
</tu-popover>
</template><template>
<tu-popover title="送元二使安西">
<tu-button>悬停</tu-button>
<template #content>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</template>
</tu-popover>
<tu-popover title="送元二使安西" trigger="click">
<tu-button>点击</tu-button>
<template #content>
<p style="line-height: 2">渭城朝雨浥轻尘，客舍青青柳色新。</p>
<p style="line-height: 2">劝君更尽一杯酒，西出阳关无故人。</p>
</template>
</tu-popover>
</template>弹出位置
设置 tu-popover 元素属性的 position 值为 tl、top、tr、bl、bottom、br、lt、left、lb、rt、right、rb来配置方位。
<template>
<div :style="{ position: 'relative', width: '440px', height: '280px' }">
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="tl"
>
<tu-button style="position: absolute; top: 0; left: 90px">
上左
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="top"
>
<tu-button style="position: absolute; top: 0; left: 180px">
上方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="tr"
>
<tu-button style="position: absolute; top: 0; left: 280px">
上右
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="bl"
>
<tu-button style="position: absolute; top: 240px; left: 80px">
下左
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="bottom"
>
<tu-button style="position: absolute; top: 240px; left: 180px">
下方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="br"
>
<tu-button style="position: absolute; top: 240px; left: 280px">
下右
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="lt"
>
<tu-button style="position: absolute; top: 60px; left: 10px">
左上
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="left"
>
<tu-button style="position: absolute; top: 120px; left: 10px">
左方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="lb"
>
<tu-button style="position: absolute; top: 180px; left: 10px">
左下
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="rt"
>
<tu-button style="position: absolute; top: 60px; left: 350px">
右上
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="right"
>
<tu-button style="position: absolute; top: 120px; left: 350px">
右方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="rb"
>
<tu-button style="position: absolute; top: 180px; left: 350px">
右下
</tu-button>
</tu-popover>
</div>
</template><template>
<div :style="{ position: 'relative', width: '440px', height: '280px' }">
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="tl"
>
<tu-button style="position: absolute; top: 0; left: 90px">
上左
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="top"
>
<tu-button style="position: absolute; top: 0; left: 180px">
上方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="tr"
>
<tu-button style="position: absolute; top: 0; left: 280px">
上右
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="bl"
>
<tu-button style="position: absolute; top: 240px; left: 80px">
下左
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="bottom"
>
<tu-button style="position: absolute; top: 240px; left: 180px">
下方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="br"
>
<tu-button style="position: absolute; top: 240px; left: 280px">
下右
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="lt"
>
<tu-button style="position: absolute; top: 60px; left: 10px">
左上
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="left"
>
<tu-button style="position: absolute; top: 120px; left: 10px">
左方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="lb"
>
<tu-button style="position: absolute; top: 180px; left: 10px">
左下
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="rt"
>
<tu-button style="position: absolute; top: 60px; left: 350px">
右上
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="right"
>
<tu-button style="position: absolute; top: 120px; left: 350px">
右方
</tu-button>
</tu-popover>
<tu-popover
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
position="rb"
>
<tu-button style="position: absolute; top: 180px; left: 350px">
右下
</tu-button>
</tu-popover>
</div>
</template>气泡尺寸
tu-popover 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：`large` `small` `mini`，通过设置 size 属性来配置它们，以适用不同场景。
<template>
<tu-popover
size="mini"
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
>
<tu-button>超小</tu-button>
</tu-popover>
<tu-popover
size="small"
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
>
<tu-button>较小</tu-button>
</tu-popover>
<tu-popover title="送元二使安西" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>中等</tu-button>
</tu-popover>
<tu-popover
size="large"
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
>
<tu-button>较大</tu-button>
</tu-popover>
</template><template>
<tu-popover
size="mini"
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
>
<tu-button>超小</tu-button>
</tu-popover>
<tu-popover
size="small"
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
>
<tu-button>较小</tu-button>
</tu-popover>
<tu-popover title="送元二使安西" content="渭城朝雨浥轻尘，客舍青青柳色新。">
<tu-button>中等</tu-button>
</tu-popover>
<tu-popover
size="large"
title="送元二使安西"
content="渭城朝雨浥轻尘，客舍青青柳色新。"
>
<tu-button>较大</tu-button>
</tu-popover>
</template>Popover API
Popover Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| popup-visible / v-model | 文字气泡是否可见 | Boolean | - |
| default-popup-visible | 文字气泡默认是否可见（非受控模式） | Boolean | false |
| title | 标题 | String | - |
| content | 内容 | String | - |
| trigger | 触发方式 | String | hover |
| position | 弹出位置 | String | top |
| content-class | 弹出框内容的类名 | ClassName | - |
| content-style | 弹出框内容的样式 | CSSProperties | - |
| arrow-class | 弹出框箭头的类名 | ClassName | - |
| arrow-style | 弹出框箭头的样式 | CSSProperties | - |
| popup-container | 弹出框的挂载容器 | String HTMLElement null undefined | - |
Popover Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| popup-visible-change | 文字气泡显示状态改变时触发 | Function |
Popover Slots
| 参数名 | 描述 | 类型 |
|---|---|---|
| title | 标题 | - |
| content | 内容 | - |