Popover 气泡提示 | uView Next - 全面兼容 nvue 的 uni-app 生态框架

# 介绍

Popover 气泡弹出框是一个轻量级的弹出层组件，用于显示提示信息或额外内容。支持多种弹出方向和位置，具有良好的交互体验。

注意

由于小程序无法监听点击自己以外的地方，为了在点击页面其他地方时，可以自动关闭 popover ，所以需要在页面的根元素上绑定点击事件，并发送 uni.$emit('u-popover-close') 事件

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	X	√	√

# 基础用法

通过 content 属性设置弹出框的内容，通过 position 属性设置弹出方向。

<template>
  <u-popover :content="text" position="top">
    <u-button type="primary">基础用法</u-button>
  </u-popover>
</template>

<script>
export default {
  data() {
    return {
      text: '我是气泡的内容'
    }
  }
}
</script>
✅ Copy success!

# 弹出位置

支持 12 种弹出位置，通过 position 属性设置：

<template>
  <view>
    <!-- 顶部弹出 -->
    <u-popover position="top-left" :content="text">
      <u-button type="primary">顶部居左</u-button>
    </u-popover>
    
    <u-popover position="top" :content="text">
      <u-button type="primary">顶部居中</u-button>
    </u-popover>
    
    <u-popover position="top-right" :content="text">
      <u-button type="primary">顶部居右</u-button>
    </u-popover>

    <!-- 底部弹出 -->
    <u-popover position="bottom-left" :content="text">
      <u-button type="primary">底部居左</u-button>
    </u-popover>
    
    <u-popover position="bottom" :content="text">
      <u-button type="primary">底部居中</u-button>
    </u-popover>
    
    <u-popover position="bottom-right" :content="text">
      <u-button type="primary">底部居右</u-button>
    </u-popover>

    <!-- 左侧弹出 -->
    <u-popover position="left-top" :content="text">
      <u-button type="primary">左侧顶部</u-button>
    </u-popover>
    
    <u-popover position="left" :content="text">
      <u-button type="primary">左侧居中</u-button>
    </u-popover>
    
    <u-popover position="left-bottom" :content="text">
      <u-button type="primary">左侧底部</u-button>
    </u-popover>

    <!-- 右侧弹出 -->
    <u-popover position="right-top" :content="text">
      <u-button type="primary">右侧顶部</u-button>
    </u-popover>
    
    <u-popover position="right" :content="text">
      <u-button type="primary">右侧居中</u-button>
    </u-popover>
    
    <u-popover position="right-bottom" :content="text">
      <u-button type="primary">右侧底部</u-button>
    </u-popover>
  </view>
</template>
✅ Copy success!

# 自定义内容

使用 content 插槽可以自定义弹出框的内容：

<template>
  <u-popover position="bottom" bgColor="#3c9cff" width="200px">
    <u-button type="primary">自定义内容</u-button>
    <template v-slot:content>
      <view style="padding: 10px;">
        <text style="color: white;">我是自定义内容</text>
        <text style="color: white; margin-top: 5px;">支持富文本内容</text>
      </view>
    </template>
  </u-popover>
</template>
✅ Copy success!

# 自动定位

设置 position="auto" 可以让组件自动计算最佳弹出位置：

<template>
  <u-popover position="auto" :content="text">
    <u-button type="primary">自动定位</u-button>
  </u-popover>
</template>
✅ Copy success!

# 样式自定义

# 背景色和文字颜色

<template>
  <u-popover 
    :content="text" 
    position="top" 
    bgColor="#ff6600" 
    color="#ffffff"
  >
    <u-button type="primary">自定义颜色</u-button>
  </u-popover>
</template>
✅ Copy success!

# 尺寸设置

<template>
  <u-popover 
    :content="text" 
    position="top" 
    width="300px"
    minWidth="100px"
    maxWidth="400px"
    padding="15px"
    round="8px"
  >
    <u-button type="primary">自定义尺寸</u-button>
  </u-popover>
</template>
✅ Copy success!

# 箭头设置

<template>
  <view>
    <!-- 隐藏箭头 -->
    <u-popover :content="text" position="top" :showArrow="false">
      <u-button type="primary">无箭头</u-button>
    </u-popover>

    <!-- 自定义箭头 -->
    <u-popover 
      :content="text" 
      position="top" 
      arrowSize="16px" 
      arrowColor="#ff6600"
    >
      <u-button type="primary">自定义箭头</u-button>
    </u-popover>
  </view>
</template>
✅ Copy success!

# 禁用状态

通过 disabled 属性禁用弹出框：

<template>
  <u-popover :content="text" position="top" :disabled="true">
    <u-button type="primary">禁用状态</u-button>
  </u-popover>
</template>
✅ Copy success!

# 点击外部关闭（H5不需要）

组件支持点击外部自动关闭功能。在非 H5 环境下，需要在页面根元素添加点击事件：

<template>
  <view class="page" @click="closeOutside">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    closeOutside() {
      // 关闭所有打开的 popover
      uni.$emit('u-popover-close')
    }
  }
}
</script>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值	可选值
show	是否显示弹出层	Boolean	false	true / false
content	弹出层内容	String	''	-
position	弹出方向	String	'top'	top / bottom / left / right / auto / top-left / top-right / bottom-left / bottom-right / left-top / left-bottom / right-top / right-bottom
showArrow	是否显示箭头	Boolean	true	true / false
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	''	-
maxWidth	弹出层最大宽度	String / Number	'200px'	-
minWidth	弹出层最小宽度	String / Number	'50px'	-
zIndex	层级	String / Number	999	-
duration	动画时长（毫秒）	String / Number	300	-
disabled	是否禁用	Boolean	false	true / false
popoverStyle	自定义弹出层样式	Object	{}	-

# Slots

名称	说明	参数
content	弹出层的内容	-

← Pagination 分页 Markdown 文档解析 →

# Popover 气泡提示 新