介绍

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	隐藏弹出层	-	-