微信小程序 WeUI·彈窗組件

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">對(duì)話框</view>
    </view>
    <view class="page__bd">
        <view class="weui-btn-area">
            <button class="weui-btn" type="default" bindtap="openConfirm">確認(rèn)取消按鈕</button>
            <button class="weui-btn" type="default" bindtap="tapOneDialogButton">只有確認(rèn)按鈕</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
        })
    }
});

屬性列表

buttons提供按鈕組配置，每一項(xiàng)表示一個(gè)按鈕，每一項(xiàng)的屬性為

Slot

彈窗組件只有一個(gè)默認(rèn)slot用于顯示彈窗的內(nèi)容