MP-CU文档

气泡框 ui-popover

气泡框组件可以对目标元素进行更多的操作或者简要的介绍与提示。 气泡框的主体会根据目标元素在屏幕的上下半部分来显示在上面或者下面。

"usingComponents": {
    "ui-popover" : "/mp-cu/colorUI/components/ui-popover/ui-popover"
}

提示

文字提示会自动关闭。

mp-cu

<ui-popover tips="这里是提示文本">
    <button class="ui-btn">点击</button>
</ui-popover>

遮罩

默认无遮罩。

mp-cu

<ui-popover tips="这里是提示文本" mask>
    <button class="ui-btn">点击</button>
</ui-popover>

背景

默认是box-bg菜单色。

mp-cu

<ui-popover tips="这里是提示文本" bg="bg-red">
    <button class="ui-btn">点击</button>
</ui-popover>

自定义

设定 content 插槽可以自定义气泡框内容，由于微信小程序不存在mouseleave方法，如果不希望弹出层自动关闭，请设定为参数控制打开。

mp-cu

<ui-popover show="{{isShow}}">
    <button class="ui-btn">点击</button>
    <view slot="content">
        <view class="p-3">
            <ui-title title="Hello Colorui" align="center" tpl="stack" hasLine/>
        </view>
    </view>
</ui-popover>

定时

可以更改时间自动关闭，单位毫秒。文字提示默认是3000毫秒，自定义内容默认需要点击空白处或者遮罩关闭

mp-cu

<ui-popover tips="这里是提示文本" time="{{5000}}">
    <button class="ui-btn">点击</button>
</ui-popover>

触发

自定义触发方式,设定 show 来控制气泡框的显示，需要开启 isChange

mp-cu

<view class="flex-bar p-3 radius ui-BG">
    <ui-popover tips="气泡框在这里出现哦" show="{{isShow}}" isChange>
        <button class="ui-btn ui-BG-Main">目标</button>
    </ui-popover>
    <button class="ui-btn ui-BG-Main" bindtap="isShow = true">点击</button>
</view>

参数

参数类型可选值默认值说明
uiString--其他class
bgString-ui-BG背景颜色
tipsString--提示文本
maskBoolean-false遮罩
showBoolean/String-change自定义显示关闭
timeNumber-3000关闭时间，单位毫秒
bottomBoolean-false气泡框显示在下面
isChangeBoolean-false自定义触发方式
zIndexNumber/String-0层级

插槽

参数说明
默认包裹的元素
content提示内容插槽
上次更新: