tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-21
997
4m

x-modal-s 对话框 ​

居中对话框，用来替代 uni.showModal。支持自定义按钮、图标、对齐和遮罩，连续调用会自动关掉上一条。

微信内使用官方 uni.showModal，样式字段不生效，仅保留签名。

兼容性 ​

HarmonyIOSAndroidWEB小程序
支持支持支持支持支持（官方 Modal）

调用 ​

ts
import { showModal, X_MODAL_TYPE } from "@/uni_modules/x-modal-s"

showModal({
  title: "提醒",
  content: "这是一条测试消息对话框，默认按钮分离。",
  confirmText: "确定",
  cancelText: "取消",
  isSplitBtn: true,
  clickMaskClose: true,
  confirm: () => {
    console.log("确认")
  },
  cancel: () => {
    console.log("取消")
  },
  close: () => {
    console.log("已关闭")
  }
} as X_MODAL_TYPE)

showModal({
  title: "协议",
  isHtml: true,
  content: "<p>请阅读<a href=\"https://xui.tmui.design\">服务协议</a>后继续。</p>",
  clickLink: (href) => {
    console.log(href)
  }
} as X_MODAL_TYPE)

方法 ​

名称需要说明
showModalX_MODAL_TYPE弹出对话框，连续调用会关掉上一条

参数 ​

X_MODAL_TYPE

字段说明默认
title标题提醒
content内容。isHtml 为 true 时按 HTML 解析清洗""
isHtml启用 HTML 渲染与链接回调。App 用内置 Lexbor 清洗，Web 用 UTS 解析器。微信忽略false
contentAligncenter 居中 / left 顶左center
titleColor标题色#000000
contentColor内容色#333333
linkFontColor内容链接色rgb(5,121,255)
confirmText确认文字确认
confirmColor确认文字色#FFF
confirmBgColor确认底色#0579FF
confirmIcon确认 Remix 图标 unicode。微信不支持""
cancelText取消文字取消
cancelColor取消文字色#333
cancelBgColor取消底色#f5f5f5
cancelIcon取消 Remix 图标 unicode。微信不支持""
showCancel是否显示取消true
isSplitBtn按钮是否分离true
lineColor不分离时的分割线色透明
contentBgColor面板底色#fff
maskBgColor遮罩色rgba(0,0,0,0.6)
radius圆角 px16
width宽度 px320
height高度 px80
clickMaskClose点击遮罩关闭true
isBlurMask遮罩模糊，目前仅 Web 生效true
confirm点确认-
cancel点取消-
close关闭完成-
clickLink点内容链接。isHtml 为 true 时 Android / iOS / 鸿蒙 / Web 均可拦截-

没有 success / fail / complete，只用 confirm / cancel / close。

平台差异 ​

  1. 微信小程序：uni.showModal，仅 title、content、confirmText、cancelText、showCancel 等基础字段生效，无法主动关闭官方弹层。isHtml 与 clickLink 不生效。
  2. isHtml：Android / iOS / 鸿蒙用内置 Lexbor 依赖包清洗后再画；Web 用 UTS 解析器。都不依赖 x-html-u。未开启时按纯文本显示。鸿蒙弹窗是 ETS，不再使用原来的弹窗 HAR。
  3. isBlurMask：仅 Web 生效。

版本 ​

版权归https://xui.tmui.design你不得修改及二次开发，仅供TMUI4会员商用使用。不得转给非VIP会员使用，一经查实数倍赔偿，并追究法律责任。

更新日志 ​

1.0.9（2026-08-15） ​

  • 新增可选参数 isHtml：内容层解析清洗 HTML 后再渲染，并支持 clickLink。
  • 原生渲染性能强。可以直接代替官方的modal层。

1.0.8（2026-04-21） ​

  • 修复可能存在的内存泄露风险

1.0.7（2026-01-30） ​

  • 使用了sdk4.65+推出的接口来避免与官方的弹层冲突导致无法显示。

1.0.6（2025-08-17） ​

  • 更新支持鸿蒙原生 Next，采用自己编译的 Har 包来支持

1.0.5（2025-04-30） ​

  • ios,安卓,web内容现在可以渲染html内容,不要太复杂.安卓和web会拦截a标签,ios目前拦截不了会直接跳转外链.

1.0.4（2025-04-13） ​

  • 安卓端弹层修改布局,现在可以覆盖官方的Dialog-page页面了,并且可以接受安卓的返回键及侧滑关闭弹层了.并且会自动隐藏状态栏,并可以覆盖底部安全区域

1.0.3（2025-02-23） ​

  • 安卓添加了显示背景遮罩动画,及关闭遮罩动画
  • ios添加了显示背景遮罩动画,及关闭遮罩动画
  • 上述添加后,不管是显示和关闭都更加的自然

1.0.2（2025-02-13） ​

  • 兼容微信

1.0.1（2024-08-15） ​

  • 新增contentAlign,可以让内容顶左对齐,还是让内容左右上下居中对齐 .

1.0.0（2024-08-06） ​

安卓,ios,web可用。

最近更新