微信小程序 WeUI·弹窗组件
2020-07-28 09:57 更新
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>
<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
})
}
});
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-class | string | 否 | 添加在组件内部结构的class,可用于修改组件内部的样式 | |
title | string | 否 | 弹窗的标题 | |
buttons | array<object> | [] | 否 | 底部的按钮组,建议最多提供两个按钮 |
mask | boolean | 是 | 是否显示蒙层 | |
mask-closable | boolean | 是 | 点击蒙层是否可以关闭 | |
show | boolean | false | 否 | 是否显示弹窗 |
bindclose | eventhandler | 否 | 弹窗关闭的时候触发的事件 | |
bindbuttontap | eventhandler | 否 | buttons按钮组点击时触发的事件,detail为{index, item},item是按钮的配置项 |
buttons提供按钮组配置,每一项表示一个按钮,每一项的属性为
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
extClass | string | 否 | 按钮的额外的class,可用于修改组件内部的样式 | |
text | string | 否 | 按钮的文本 |
Slot
弹窗组件只有一个默认slot用于显示弹窗的内容
以上内容是否对您有帮助:
更多建议: