当前位置：首页 > news >正文

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

news 2025/7/29 10:03:55

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

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

代码如下：

// index.wxml
<van-dialoguse-slottitle="提示"show="{{ showDialog }}"show-confirm-buttonconfirm-button-color="#3d80f7"bind:confirm="onConfirmDialog"
><view class="d_content"><rich-text nodes="{{dialogText}}"></rich-text></view>
</van-dialog>

// 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: `<p  style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.5);">${msg}</span></p>`,confirmCallback: fn ? fn : null,},() => {wx.hideTabBar({animation: true,});});break;case "reject":let mArray = msg.split(rMsg);let text = `<p style="text-align: left;text-align: justify;"><span style="color: rgb(140, 140, 140);">${mArray[0]}</span><span style="color: #ff5858;">${rMsg}</span><span style="color: rgb(140, 140, 140);">${mArray[1]}</span></p>`;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();}},
})

// index.json
{"usingComponents": {"van-dialog": "@vant/weapp/dialog/index"}
}

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

使用方法

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