uview-plus

# Popover 弹窗提示 3.5.10

打开

Popover组件主要用于点击显示弹窗展示内容，Popover组件实际上与tootip组件高度类似，为减少体积，重复利用代码，因此直接使用tooltip二次封装而成。

# 平台差异说明

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

说明

由于安卓nvue下，overflow属性不支持visible值，故此组件暂不支持安卓nvue环境。

# 上方弹出

<template>
    <up-popover
        text="text5"
        color="#333"
        bgColor="#e3e4e6"
        popupBgColor="#f7f7f7"
        direction="top"
    >
        <template #trigger>
            <up-button style="width: 100px" :stop="false" type="primary">点击</up-button>
        </template>
        <template #content>
            <view style="padding: 6px 12px;">自定义内容</view>
        </template>
    </up-popover>
</template>

# 下方弹出

<template>
    <up-popover
        text="text5"
        color="#333"
        bgColor="#e3e4e6"
        popupBgColor="#f7f7f7"
        direction="bottom"
    >
        <template #trigger>
            <up-button style="width: 100px" :stop="false" type="primary">点击</up-button>
        </template>
        <template #content>
            <view style="padding: 6px 12px;">自定义内容</view>
        </template>
    </up-popover>
</template>

# 左侧弹出及强制定位

<template>
    <up-popover
        text="text5"
        color="#fff"
        bgColor="#333"
        popupBgColor="#333"
        :forcePosition="{right: '108px', top: '0px'}"
        direction="left"
    >
        <template #trigger>
            <up-button style="width: 100px" :stop="false" type="primary">点击</up-button>
        </template>
        <template #content>
            <view style="padding: 6px 12px;">自定义内容</view>
        </template>
    </up-popover>
</template>

# 右侧弹出

<template>
    <up-popover
        text="text5"
        color="#333"
        bgColor="#e3e4e6"
        popupBgColor="#f7f7f7"
        direction="right"
    >
        <template #trigger>
            <up-button style="width: 100px" :stop="false" type="primary">点击</up-button>
        </template>
        <template #content>
            <view style="padding: 6px 12px;">自定义内容</view>
        </template>
    </up-popover>
</template>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Tooltip Props

参数 说明 类型 默认值 可选值
text 需要显示的提示文字 String | Number - -
copyText 点击复制按钮时，复制的文本，为空则使用text值 String | Number - -
size 文本大小 String | Number 14 -
color 字体颜色 String #606266 -
bgColor 弹出提示框时，文本的背景色 String transparent -
direction 3.4.104 弹出提示的方向，top-上方，bottom-下方, left-左方, right-右方 String top bottom
zIndex 弹出提示的z-index，nvue无效 String | Number 10071 -
showCopy 是否显示复制按钮 Boolean true false
buttons 扩展的按钮组 Array - -
overlay 是否显示透明遮罩以防止触摸穿透 Boolean true false
showToast 是否显示复制成功或者失败的toast Boolean true false
triggerMode 3.4.104 触发模式 String longpress click
popupBgColor 3.4.104 弹窗背景色 String
forcePosition 3.5.8 手动强制定位更精确控制,支持指定left/right/top/bottom Object {}

# Slot

名称 说明
trigger 3.4.104 触发器插槽
content 3.4.104 弹窗内容插槽

# Tooltip Events

事件名 说明 回调参数
click 点击触发事件 index，被点击按钮的索引

← PDF阅读器 →