更新记录

1.0.1(2022-06-12) 下载此版本

删除项目示例多余文件

1.0.0(2022-06-12) 下载此版本

1.该弹窗主要用于美化APP端【提示弹窗】和【确认弹窗】 2.支持APP端自定义弹窗样式,其他端使用默认弹窗样式


平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ - - - - - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - - -

组件使用

1. 导入项目及配置

(1)将组件文件“/components/dialog”放入自己的项目的相同位置

项目根路径/components/dialog

(2)配置page.json

{
    "path" : "components/dialog/dialog",
    "style" :                                                                                    
    {
        "navigationStyle": "custom",
        // #ifdef APP-PLUS
        "backgroundColor": "transparent",
        "backgroundColorTop": "transparent",
        "backgroundColorBottom": "transparent",
        // #endif
        "app-plus": {
            "animationType": "fade-in",
            "background": "transparent",
            "popGesture": "none"
        }
    }

}

(3)配置App.vue

const dialog = require("@/components/dialog/dialogUtil")
export default {
    onLaunch: function() {
        uni['dialog'] = dialog;
        console.log('App Launch')
    },
    onShow: function() {
        console.log('App Show')
    },
    onHide: function() {
        console.log('App Hide')
    }
}

2.弹窗组件使用

(1)提示弹窗 alert(title, content, callback,confirmText)

参数说明

参数名 类型 必填 说明
title String 否 弹窗标题
content String 否 弹窗内容,可填空字符串
callback Function 否 点击确定按钮后回调函数
confirmText String 否 确定按钮的文字,默认为"确定"

示例

uni.dialog.alert("温馨提示","这是一个提示弹窗",()=>{
    uni.showToast({ title: '好的', icon:"none" });
},"好的");

(2)确认弹窗 confirm(title, content, confirm, cancel, confirmText, cancelText)

参数 类型 必填 说明
title String 否 弹窗标题
content String 否 弹窗内容,可填空字符串
confirm Function 否 点击确定按钮后回调函数
cancel Function 否 点击取消按钮后回调函数
confirmText String 否 确定按钮的文字,默认为"确定"
cancelText String 否 取消按钮的文字,默认为"取消"

示例

uni.dialog.confirm("温馨提示","这是一个确认弹窗",()=>{
    uni.showToast({ title: '确定', icon:"none" });
},()=>{
    uni.showToast({ title: '取消', icon:"none" });
});

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议