小程序简化mp-dialog对话框的处理代码

在一个具备数据增删改功能的页面中, 一种呈现增删改操作的常见方式就是对话框. 微信Weui中的mp-dialog组件的控制, 在js中一般需要下面五六种对象和函数

• data中控制对话框显示的isShowDialog布尔变量
• data中展示对话框中按钮的dialogButtons数组变量
• 触发对话框显示的函数showDialog
• 点击按钮后触发的, 与mp-dialog的bindbuttontap绑定的tapDialogButton函数
• 隐藏对话框的函数. 因为比较简单,一般集成在tapDialogButton中
• 处理实际增删改的函数如add
  显得特别复杂.增删改各一个对话框,上面就得来3套, 15~18个.
  考虑将dialogButtons/showDialog()/tapDialogButton()合并, 不同的对话框共用一套按钮/显示/隐藏/处理按钮函数.以add为例, 如下:

<view bind:tap="showDialog" data-show="isAddDialog">显示对话框</view>
<mp-dialog title="新增目标" show="{{isAddDialog}}" bindbuttontap="tapDialogButton" data-show="isAddDialog" data-func="add" buttons="{{dialogButtons}}">
对话框内容
</mp-dialog>

Page({
  data: {
    dialogButtons: [{text: '取消'}, {text: '确定'}], // 通用的对话框按钮列表
    isAddDialog: false,
  },
  showDialog(e){
    this.setData({
      [e.currentTarget.dataset.show]: true
    })
  },
  tapDialogButton(e){
    console.log(e)
    switch (e.detail.index) {
      case 0: // 取消   
        this.setData({
          [e.currentTarget.dataset.show]: false
        })
        break;
      case 1:
        console.log('dialog running ', e.currentTarget.dataset.dialog)
        let ret = this[e.currentTarget.dataset.func](e)
        // 返回值为true时表示成功处理, 则隐藏对话框
        if(ret){        
          this.setData({
            [e.currentTarget.dataset.show]: false
          })
        }
        break;
    }
  },
  add(e){
    // 对数据进行处理
    return true
  },
})