UviewUltra 4.0

Appearance

Popover 弹窗提示 4.4.0 ​

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

平台差异说明 ​

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|x|√|√|

说明

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

上方弹出 ​

vue
<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>

下方弹出 ​

vue
<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>

左侧弹出及强制定位 ​

vue
<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>

右侧弹出 ​

vue
<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 | Number14-
color字体颜色String#606266-
bgColor弹出提示框时，文本的背景色Stringtransparent-
direction 4.4.0弹出提示的方向，top-上方，bottom-下方, left-左方, right-右方Stringtopbottom
zIndex弹出提示的z-index，nvue无效String | Number10071-
showCopy是否显示复制按钮Booleantruefalse
buttons扩展的按钮组Array--
overlay是否显示透明遮罩以防止触摸穿透Booleantruefalse
showToast是否显示复制成功或者失败的toastBooleantruefalse
triggerMode 4.4.0触发模式Stringlongpressclick
popupBgColor 4.4.0弹窗背景色String
forcePosition 4.4.0手动强制定位更精确控制,支持指定left/right/top/bottomObject{}

Slot ​

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

Tooltip Events ​

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