微信小程序weui dialog封装,兼容wx.showModal
最近项目业务升级，有些按钮防止误触还是要加wx.showModal的。但wx.showModal样式并不好看，在官方推荐的weui库上有一个Dialog弹窗组件可以实现和wx.showModal一样的效果并且样式要好看一点。
于是我打算直接用dialog组件，并且将之前的wx.showModal修改，封装一下让dialog组件使用方式和wx.showModal相同，这样只改个调用函数名字就可以了。
在 页面.json 中引入组件
1
2
3
| "usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog"
}
|
wxml外层添加组件元素
1
2
3
| <mp-dialog title="{{dialogTitle}}" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{dialogButtons}}">
<view>{{dialogContent}}</view>
</mp-dialog>
|
在data对象中添加属性
1
2
3
4
5
6
7
8
| buttonConfig: null,
dialogShow: false,
dialogTitle: "提示",
dialogContent: "",
dialogButtons: [
{text: '取消'},
{text: '确认'}
]
|
声明showDialog方法，就是使用弹框的方法
1
2
3
4
5
6
7
8
| showDialog(data) {
this.setData({
dialogTitle: data.title ? data.title : "提示",
dialogContent: data.content ? data.content : "",
buttonConfig: data.success ? data.success : ()=>{},
dialogShow: true
})
},
|
点击确定时执行的方法
1
2
3
4
5
6
7
8
9
10
| tapDialogButton(e) {
this.setData({
dialogShow:false
})
if(e.detail.index){
this.data.buttonConfig({confirm:e.detail.index})
}else{
this.data.buttonConfig({confirm:0})
}
},
|
使用方式和wx.showModal相同
1
2
3
4
5
6
7
8
9
10
11
| this.showDialog({
title: '标题',
content:"内容",
success:()=>{
if (res.confirm) {
console.log("点击了确定");
}else{
console.log("点击了取消");
}
}
})
|
