WeChat small program WeUI e-window component
May 21, 2021 WeChat Mini Program Development Document
Table of contents
Dialog
Dialog e-window assembly.
Example code:
{
"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
})
}
});
The list of properties
| Property | Type | The default | Required | Description |
|---|---|---|---|---|
| ext-class | string | Whether | A class added to the internal structure of a component that can be used to modify the style inside a component | |
| title | string | Whether | The title of the e-window | |
| buttons | array<object> | [] | Whether | Button group at the bottom, it is recommended to provide up to two buttons |
| mask | boolean | Is | Whether the mask is displayed | |
| mask-closable | boolean | Is | Click to see if the mask can be closed | |
| show | boolean | false | Whether | Whether to display the e-window |
| bindclose | eventhandler | Whether | Events triggered when the window closes | |
| bindbuttontap | eventhandler | Whether | The event triggered when the buttons button group clicks, the detail is the "index, item", and the item is the configuration item of the button |
Buttons provide a button group configuration, each representing a button, and each item has a property
| Property | Type | The default | Required | Description |
|---|---|---|---|---|
| extClass | string | Whether | The additional class of the button, which can be used to modify the style inside the component | |
| text | string | Whether | The text of the button |
Slot
The e-window assembly has only one default slot for displaying the contents of the e-window