微信小程序weui dialog封装,兼容wx.showModal

最近项目业务升级，有些按钮防止误触还是要加wx.showModal的。但wx.showModal样式并不好看，在官方推荐的weui库上有一个Dialog弹窗组件可以实现和wx.showModal一样的效果并且样式要好看一点。
于是我打算直接用dialog组件，并且将之前的wx.showModal修改，封装一下让dialog组件使用方式和wx.showModal相同，这样只改个调用函数名字就可以了。

在 页面.json 中引入组件

"usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }

wxml外层添加组件元素

<mp-dialog title="{{dialogTitle}}" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{dialogButtons}}">
    <view>{{dialogContent}}</view>
</mp-dialog>

在data对象中添加属性

    buttonConfig: null,
    dialogShow: false,
    dialogTitle: "提示",
    dialogContent: "",
    dialogButtons: [
      {text: '取消'},
      {text: '确认'}
    ]

声明showDialog方法，就是使用弹框的方法

showDialog(data) {
    this.setData({
      dialogTitle: data.title ? data.title : "提示",
      dialogContent: data.content ? data.content : "",
      buttonConfig: data.success ? data.success : ()=>{},
      dialogShow: true
    })
  },

点击确定时执行的方法

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相同

    this.showDialog({
      title: '标题',
      content:"内容",
      success:()=>{
        if (res.confirm) {
          console.log("点击了确定");
        }else{
          console.log("点击了取消");
        }
      }
    })