外观
Popover 气泡提示
约 779 字大约 3 分钟
2025-10-31
介绍
Popover 气泡弹出框是一个轻量级的弹出层组件,用于显示提示信息或额外内容。支持多种弹出方向和位置,具有良好的交互体验。
基础用法
通过 content 属性设置弹出框的内容,通过 position 属性设置弹出方向。
<template>
<u-popover :content="text" position="top">
<un-button type="primary">基础用法</un-button>
</u-popover>
</template>
<script>
export default {
data() {
return {
text: '我是气泡的内容'
}
}
}
</script>弹出位置
支持 12 种弹出位置,通过 position 属性设置:
<template>
<view>
<!-- 顶部弹出 -->
<u-popover position="top-left" :content="text">
<un-button type="primary">顶部居左</un-button>
</u-popover>
<u-popover position="top" :content="text">
<un-button type="primary">顶部居中</un-button>
</u-popover>
<u-popover position="top-right" :content="text">
<un-button type="primary">顶部居右</un-button>
</u-popover>
<!-- 底部弹出 -->
<u-popover position="bottom-left" :content="text">
<un-button type="primary">底部居左</un-button>
</u-popover>
<u-popover position="bottom" :content="text">
<un-button type="primary">底部居中</un-button>
</u-popover>
<u-popover position="bottom-right" :content="text">
<un-button type="primary">底部居右</un-button>
</u-popover>
<!-- 左侧弹出 -->
<u-popover position="left-top" :content="text">
<un-button type="primary">左侧顶部</un-button>
</u-popover>
<u-popover position="left" :content="text">
<un-button type="primary">左侧居中</un-button>
</u-popover>
<u-popover position="left-bottom" :content="text">
<un-button type="primary">左侧底部</un-button>
</u-popover>
<!-- 右侧弹出 -->
<u-popover position="right-top" :content="text">
<un-button type="primary">右侧顶部</un-button>
</u-popover>
<u-popover position="right" :content="text">
<un-button type="primary">右侧居中</un-button>
</u-popover>
<u-popover position="right-bottom" :content="text">
<un-button type="primary">右侧底部</un-button>
</u-popover>
</view>
</template>自动定位
设置 position="auto" 可以让组件自动计算最佳弹出位置:
<template>
<u-popover position="auto" :content="text">
<un-button type="primary">自动定位</un-button>
</u-popover>
</template>自定义内容
使用 content 插槽可以自定义弹出框的内容:
<template>
<u-popover position="bottom" bgColor="#3c9cff" width="200px">
<un-button type="primary">自定义内容</un-button>
<template #content>
<view style="padding: 10px;">
<text style="color: white;">我是自定义内容</text>
<text style="color: white; margin-top: 5px;">支持富文本内容</text>
</view>
</template>
</u-popover>
</template>样式自定义
<template>
<u-popover
:content="text"
position="top"
bgColor="#ff6600"
>
<un-button type="primary">自定义颜色</un-button>
</u-popover>
</template>禁用状态
通过 disabled 属性禁用弹出框:
<template>
<u-popover :content="text" position="top" :disabled="true">
<un-button type="primary">禁用状态</un-button>
</u-popover>
</template>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show | 是否显示弹出层 | Boolean | false |
| content | 弹出层内容 | String | '' |
| position | 弹出方向 | Enum | 'top' |
| showArrow | 是否显示箭头 | Boolean | true |
| arrowSize | 箭头大小 | String / Number | '12px' |
| arrowColor | 箭头颜色 | String | '#000' |
| bgColor | 弹出层背景色 | String | '#060607' |
| color | 文字颜色 | String | '#fff' |
| fontSize | 字体大小 | String / Number | '14px' |
| padding | 内边距 | String / Number | '8px 12px' |
| round | 圆角 | String / Number | '4px' |
| width | 弹出层宽度,超出后自动换行 | String / Number | '' |
| zIndex | 层级 | String / Number | 999 |
| duration | 动画时长(毫秒) | String / Number | 300 |
| disabled | 是否禁用 | Boolean | false |
Slots
| 名称 | 说明 | 参数 |
|---|---|---|
| content | 弹出层的内容 | - |
Methods
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| show | 显示弹出层 | - | - |
| hide | 隐藏弹出层 | - | - |
