微信小程序 WeUI·弹窗组件

2022-05-12 17:40 更新

Dialog

Dialog弹窗组件。

示例代码:

{
  "usingComponents": {
    "mp-dialog": "../components/dialog/dialog"
  }
}

<view class="page">
    <view class="page__hd">
        <view class="page__title">Dialog</view>
        <view class="page__desc">对话框</view>
    </view>
    <view class="page__bd">
        <view class="weui-btn-area">
            <button class="weui-btn" type="default" bindtap="openConfirm">确认取消按钮</button>
            <button class="weui-btn" type="default" bindtap="tapOneDialogButton">只有确认按钮</button>
        </view>
    </view>
    <mp-dialog title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
        <view>test content</view>
    </mp-dialog>
    <mp-dialog title="test1" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}">
        <view>test content1</view>
    </mp-dialog>
</view>

Page({
    data: {
        dialogShow: false,
        showOneButtonDialog: false,
        buttons: [{text: '取消'}, {text: '确定'}],
        oneButton: [{text: '确定'}],
    },
    openConfirm: function () {
        this.setData({
            dialogShow: true
        })
    },
    tapDialogButton(e) {
        this.setData({
            dialogShow: false,
            showOneButtonDialog: false
        })
    },
    tapOneDialogButton(e) {
        this.setData({
            showOneButtonDialog: true
        })
    }
});


属性列表

属性类型默认值必填说明
ext-classstring添加在组件内部结构的class,可用于修改组件内部的样式
titlestring弹窗的标题
buttonsarray<object>[]底部的按钮组,建议最多提供两个按钮
maskboolean是否显示蒙层
mask-closableboolean点击蒙层是否可以关闭
showbooleanfalse是否显示弹窗
bindcloseeventhandler弹窗关闭的时候触发的事件
bindbuttontapeventhandlerbuttons按钮组点击时触发的事件,detail为{index, item},item是按钮的配置项

buttons提供按钮组配置,每一项表示一个按钮,每一项的属性为

属性类型默认值必填说明
extClassstring按钮的额外的class,可用于修改组件内部的样式
textstring按钮的文本

Slot

弹窗组件只有一个默认slot用于显示弹窗的内容


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号