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

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

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

代码如下:

javascript 复制代码
// 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>
javascript 复制代码
// 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();
    }
  },
})
javascript 复制代码
// index.json
{
  "usingComponents": {
    "van-dialog": "@vant/weapp/dialog/index"
  }
}
javascript 复制代码
// index.wxss
.d_content {
  box-sizing: border-box;
  padding: 36rpx 46rpx;
}

使用方法

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

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

相关推荐
江城开朗的豌豆2 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
江城开朗的豌豆2 小时前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
说私域3 小时前
开源AI大模型AI智能名片S2B2C商城小程序在护肤品文案痛点表达中的应用与效果研究
人工智能·小程序
weixin_177297220693 小时前
盲盒一番赏小程序系统开发:重构潮玩消费的沉浸式革命
小程序·重构·盲盒
weixin_177297220693 小时前
短剧小程序系统开发:开启影视娱乐新纪元
小程序·短剧
小小王app小程序开发3 小时前
线下剧本杀预约小程序核心功能玩法解析:轻量化载体重构娱乐消费生态
小程序·重构·娱乐
说私域3 小时前
信息传递视角下开源AI智能名片链动2+1模式S2B2C商城小程序对零售企业的赋能研究
人工智能·小程序·零售
韩立学长3 小时前
【开题答辩实录分享】以《智能垃圾回收小程序》为例进行答辩实录分享
spring boot·小程序
菜鸟una4 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
代码s贝多芬的音符11 小时前
ios android 小程序 蓝牙 CRC16_MODBUS
android·ios·小程序