更新记录
1.0.0(2024-09-29) 下载此版本
初版
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.24,Android:5.0,iOS:不支持,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
[TOC]
native-uts-dialog
简介
解决一些弹窗不能覆盖tabbar的问题
使用方法
导入插件后,在.vue
页面使用以下方式导入,或者导入示例项目
import { showDialog, dismissDialog } from '@/uni_modules/native-uts-dialog'
API
showDialog(options,callback)
参数
options {Object} 相关选项
参数 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
closeOnClickOverlay | Boolean | false | 否 | 点击遮罩层关闭Dialog,默认点击不关闭 |
title | Object | 是 | Dialog 显示的标题 | |
content | Object | 是 | Dialog 显示的内容 | |
nativeButton | Boolean | false | 否 | Dialog 按钮组的样式是否与原生弹窗的按钮样式一致,当nativeButton=true 时,按钮组不支持设置bgColor属性 |
button | Array<Object> | 是 | Dialog 显示的按钮组 |
title {Object}
参数 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
text | String | 是 | Dialog 标题文字 | |
fontSize | Number | 16 | 否 | Dialog 标题文字大小 |
align | String | left | 否 | Dialog 标题文字对齐方式,可选 left、center、right |
color | String | #000000 | 否 | Dialog 标题文字颜色,颜色值格式为 16 进制格式的颜色字符串,请使用默认值的格式 |
boldOritalic | String | BOLD | 否 | Dialog 标题文字是否加粗/斜体,可选 NORMAL、BOLD、ITALIC、BOLD_ITALIC |
content {Object}
参数 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
text | String | 是 | Dialog 内容文字 | |
fontSize | Number | 16 | 否 | Dialog 内容文字大小 |
height | Number | 否 | Dialog 内容区域高度,如果不传会根据内容自适应且不超过当前屏幕高度的50%,如果设置的值超过当前屏幕的50%,设置的值将不生效 | |
align | String | left | 否 | Dialog 内容文字对齐方式,可选 left、center、right |
color | String | #000000 | 否 | Dialog 内容文字颜色,颜色值格式为16进制格式的颜色字符串,请使用默认值的格式 |
button {Object} 相关选项
参数 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
key | String | 是 | button 标识,只能是cancel、confirm | |
text | String | 是 | button 文字 | |
color | String | #000000、#3F51B5 | 否 | button 文字颜色,颜色值格式为 16 进制格式的颜色字符串,请使用默认值的格式。key为cancel时,默认颜色是"#000000";key为confirm时,默认颜色是"#3F51B5" |
bgColor | String | 否 | 当nativeButton=false 时,设置此值可以修改按钮背景色 |
callback {function ({ whichButton, validFail })} 回调方法
点击按钮触发回调方法返回一个对象
参数 | 类型 | 描述 |
---|---|---|
whichButton | Number | 点击key:cancel 的button,返回值是-3 ,点击key:confirm 的button,返回值是-1 ,为啥是这两个值,因为两个button分别对应AlertDialog 的NegativeButton ,PositiveButton ,可自行前往Android官方文档查看 |
validFail | Object | 参数校验信息,自行查看native-uts-dialog/utssdk/validate.uts 文件,参数正常不会返回这个(可忽略) |
示例
showDialog({
closeOnClickOverlay: false,
title: {
text: '加强李信',
align: 'center',
color: '#FF4949',
fontSize: 18,
boldOritalic: 'BOLD'
},
content: {
height: 800,
text:'加强李信',
color: '#000000',
fontSize: 14,
align: 'left'
},
nativeButton: false,
button: [
{
key: 'cancel',
text: '取 消',
color: '#000000',
bgColor: '#FFFFFF'
},
{
key: 'confirm',
text: '确 认',
color: '#1890FF',
bgColor: '#FFFFFF'
}
]
}, ({ whichButton, validFail }) => {
if (whichButton) {
let title = null;
if (whichButton == -1) {
title = '点击了key:confirm的按钮';
} else if (whichButton == -3) {
title = '点击了key:cancel的按钮';
}
uni.showToast({
title: title,
icon: 'none'
});
} else {
uni.showToast({
title: '请检查参数:' + validFail.validateMsg,
icon: 'none',
duration: 3000
});
console.log(validFail);
}
});
dismissDialog()
隐藏Dialog,无参数
IOS端后续有时间再补上吧
赞赏
如果觉得插件对你有帮助 buy me a coffee,感谢各位大佬