使用van-dialog二次封装微信小程序模态框

由于微信小程序的wx.showModal不支持富文本内容，无法实现更灵活的展示效果，故需要进行二次封装

实现思路：使用van-dialog以及微信小程序的rich-text实现

代码如下：

// index.wxml
<van-dialog
  use-slot
  title="提示"
  show="{{ showDialog }}"
  show-confirm-button
  confirm-button-color="#3d80f7"
  bind:confirm="onConfirmDialog"
>
  <view class="d_content">
    <rich-text nodes="{{dialogText}}"></rich-text>
  </view>
</van-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13

// index.js
Page({
data: {
    showDialog: false,
    dialogText: "",
    confirmCallback: null,
  },
  onCloseDialog() {
    this.setData({ showDialog: false }, () => {
      wx.showTabBar({
        animation: true,
      });
      setTimeout(() => {
        this.setData({
          dialogText: "",
          confirmCallback: null,
        });
      }, 300);
    });
  },
  onShowDialog(type, msg, rMsg, fn) {
    switch (type) {
      case "model":
        this.setData(
          {
            showDialog: true,
            dialogText: `
${msg}`,
            confirmCallback: fn ? fn : null,
          },
          () => {
            wx.hideTabBar({
              animation: true,
            });
          }
        );
        break;
      case "reject":
        let mArray = msg.split(rMsg);
        let text = `
          
${mArray[0]}${rMsg}${mArray[1]}
        `;
        this.setData(
          {
            showDialog: true,
            dialogText: text,
            confirmCallback: fn ? fn : null,
          },
          () => {
            wx.hideTabBar({
              animation: true,
            });
          }
        );
        break;
      case "custom":
        this.setData(
          {
            showDialog: true,
            dialogText: msg,
            confirmCallback: fn ? fn : null,
          },
          () => {
            wx.hideTabBar({
              animation: true,
            });
          }
        );
        break;
      default:
        this.setData(
          {
            showDialog: true,
            dialogText: msg,
            confirmCallback: fn ? fn : null,
          },
          () => {
            wx.hideTabBar({
              animation: true,
            });
          }
        );
        break;
    }
  },
  onConfirmDialog() {
    wx.showTabBar({
      animation: true,
    });
    this.onCloseDialog();

    if (typeof this.data.confirmCallback === "function") {
      this.data.confirmCallback();
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

// index.json
{
  "usingComponents": {
    "van-dialog": "@vant/weapp/dialog/index"
  }
}
1
2
3
4
5
6

// index.wxss
.d_content {
  box-sizing: border-box;
  padding: 36rpx 46rpx;
}

1
2
3
4
5
6

使用方法

this.onShowDialog("model",`您已向：${subItem.name}申请权限，请等待管理员审核。`);
this.onShowDialog(
              "reject",
              `您的申请被拒绝，原因为：${subItem.reason}，请根据拒绝原因检查您的提交信息，点击确认继续。`,
              subItem.reason,
              () => {
                // ...
              }
            );
1
2
3
4
5
6
7
8
9

本文仅提供一种思路，可能不是最优写法，欢迎大家讨论留言