模态框 ui-modal

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

系统调用

mp-cu

this.$showDialog({
    title : 'colorUI弹窗',
    content: '这是一个模态弹窗',
    success: res => {
        console.log(res)
        if(res.confirm){
            this.$success({
                title : '点击了确定'
            })
        }else{
            wx.showToast({
                title: '点击了取消',
                icon : 'none'
            })
        }
    }
})

自定义-1

mp-cu

<ui-modal show="{{true}}" dialog="width:auto" option="{{false}}">
    <view class="p-4">
        <ui-loading color img="/static/logo.png"/>
    </view>
</ui-modal>

自定义-2

mp-cu

<ui-modal show="{{true}}" bind:success='success'>
    <view class="p-5 flex-center">
        <ui-loading color img="/static/logo.png"/>
    </view>
</ui-modal>

不显示取消

组件调用

mp-cu

<ui-modal show="{{true}}" showCancel="{{false}}">
    <view class="p-5 flex-center">
        <ui-loading color img="/static/logo.png"/>
    </view>
</ui-modal>

系统调用

mp-cu

this.$showDialog({
    content: '这是一个模态弹窗',
    showCancel: false,
    success: res => {
        console.log(res);
    }
});

更改文字

组件调用

mp-cu

<ui-modal show="{{true}}" cancelText="再见" confirmText="好的">
    <view class="p-5 flex-center">
        <ui-loading color img="/static/logo.png"/>
    </view>
</ui-modal>

系统调用

mp-cu

this.$showDialog({
    content: '您好',
    cancelText: '再见',
    confirmText: '好的',
    success: res => {
        console.log(res);
    }
});

透明

透明-1

mp-cu

<ui-modal show="{{true}}" transparent mask="40" iconCancel>
    <view class="p-5 flex-center">
        <image src="/static/logo.png" mode="aspectFill"/>
    </view>
</ui-modal>

透明-2

mp-cu

<ui-modal show="{{true}}" cancelText="再见" confirmText="好的" transparent mask="40">
    <view class="p-5 flex-center">
        <image src="/static/logo.png" mode="aspectFill"/>
    </view>
</ui-modal>

抽屉

drawer

mp-cu

<ui-modal show="{{true}}" mask="40" align="bottom">
    <view class="p-5 flex-center">
        <image src="/static/logo.png" mode="aspectFill"/>
    </view>
</ui-modal>

top

mp-cu

<ui-modal show="{{true}}" mask="40" align="top">
    <view class="p-5 flex-center">
        <image src="/static/logo.png" mode="aspectFill"/>
    </view>
</ui-modal>

系统调用参数

系统调用时,不需要挂载组件

参数类型可选值默认值说明
titleString--标题
contentString--内容
showCancelBoolean-true显示取消按钮
cancelTextString-取消取消按钮文字
confirmTextString-确定确认按钮文字
successEvent-res事件

组件参数

参数类型可选值默认值说明
showBoolean-false是否显示
noNavBoolean-false排除状态栏区域
uiString--其它class样式
titleString--标题
contentString--内容
iconCancelBoolean/String-false关闭图标
showCancelBoolean/String-true显示取消按钮
optionBoolean/String-true显示按钮
cancelTextString-取消取消按钮文字
confirmTextString-确定确认按钮文字
nameString-,sys_dialog-弹框类型
alignStringtop,bottom-弹出位置
dialogString--其它style样式
tplString-default模板样式(待定)
transparentBoolean/String-false透明背景
maskBoolean/Stringtrue,80,20,40true遮罩
durationNumber-0关闭倒计时
topNumber-0距离顶部
bind:successEvent-res事件
上次更新: