更新记录

1.0.0(2024-09-29) 下载此版本

初版


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.24,Android:5.0,iOS:不支持,HarmonyOS:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
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分别对应AlertDialogNegativeButtonPositiveButton,可自行前往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,感谢各位大佬

完结撒花 ✿✿ヽ(°▽°)ノ✿

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问