更新记录
1.0.0(2024-08-06)
安卓,ios,web可用。
平台兼容性
HbuilderX/cli最低兼容版本 |
3.6.8 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
x-modal-s
特性说明
主要是用来代替uni.showModal的,相比优化有:
- 高自动适应,因此可以添加超长的title文字。
- 图标可以任意更新,大小,颜色等
- 可以添加title标题,允许改变字号,颜色 及背景
- 精致美观,可以定制界面达到与品牌相符的设计
- 可以重复打开,或者连续打开不用担心前一个是否关闭,我内部会检测关闭上一个对话框。
兼容性
IOS |
Andriod |
WEB |
12+ |
4.2+ |
所有浏览器 |
开发文档
浏览器端需要你把目录中的remixicon.ttf
复制到static目录下
调用:
import { showModal,X_MODAL_TYPE} from "@/uni_modules/x-modal-s"
// 显示
showModal({title:"提醒框",content:"这是一条测试消息对话框,默认是按钮分离哦。"} as X_MODAL_TYPE)
参数配置:
下面的图标iconCode,同组件库x-icon是相同的字体图标,请打开图标网站:查看
找到直接想要的图标后 复制 unicode ,不是名称。比如:我们只要取ED29
下面的参数图标iconCode就是ED29 iconCode:'ED29'
XLOADINGS_TYPE
export type X_MODAL_TYPE = {
title?:string,
content?:string,
cancelText?:string,
cancelBgColor?:string,
cancelColor?:string,
confirmText?:string,
confirmBgColor?:string,
confirmColor?:string,
radius?:number,
confirmIcon?:string,
cancelIcon?:string,
titleColor?:string,
contentColor?:string,
/**
* 按钮是否分离
* @default true
*/
isSplitBtn?:boolean,
// 框体内容背景
contentBgColor?:string,
// 遮罩背景
maskBgColor?:string,
confirm?:()=>void,
cancel?:()=>void,
close?:()=>void,
/**
* 背景模糊,目前仅web生效
* @default true
*/
isBlurMask?:boolean,
height?:number,
width?:number,
/**
* 是否允许点击遮罩关闭
* @default true
*/
clickMaskClose?:boolean,
/**
* 是否显示取消按钮
* @default true
*/
showCancel?:boolean
}