UniApp全局弹窗

2024-07-08 05:57| 来源: 网络整理| 查看: 265

一、设计思路

1、创建一个弹窗页面组件

2、配置page.json，使页面跳转是在当前界面展示

3、定义uni全局全局属性

4、解决多个弹窗同时使用的冲突问题

注意：此方案不支持多个弹窗并存，有且仅有一个会展示，当前弹窗展示并关闭上一个弹窗

二、代码

1、index.vue---弹窗组件

{{info.popupContent}} {{info.title}} {{info.content}} {{info.confirmText}} {{info.cancelText}} {{info.confirmText}} export default { name: 'Dialog', data() { return { info: { //消息提示 msgType: 'success', //error、warn、info messageText: '', //确认框 content: "", title: "提示", duration: 2000, cancelText: "取消", confirmText: "确定", dialogType: "", //弹窗类型 0：确认框 1:消息提示 2：加载框 popupContent: "加载中....", isShow: false, isMaskClose: "1", //1点击遮罩层关闭弹窗 } } }, onLoad(info = {}) { this.info = { ...this.info, ...info }; this.getParams(this.info); }, onUnload() { this.popupLoadingClose(); this.info.dialogType = ""; }, methods: { getParams(options) { switch (options.dialogType) { case "dialogOpen": this.dialogOpen(); break; case "messageOpen": this.messageOpen(); break; case "popupLoadingOpen": this.popupContent = options.popupContent; this.popupLoadingOpen(); break; case "popupLoadingClose": this.popupContent = options.popupContent; this.popupLoadingClose(); break; default: break; } }, /** * 确认框方法 */ dialogOpen() { this.$nextTick(() => { this.$refs.alertDialog.open(); }) }, /** * 消息提示框方法 */ messageOpen() { if (this.info.dialogType == "messageOpen") { this.$nextTick(() => { if(this.$refs.message){ this.$refs.message.open(); this.setTimeOut = setTimeout(() => { uni.navigateBack() }, this.info.duration) } }); } }, /** * 加载框方法 */ popupLoadingOpen() { this.$nextTick(() => { this.$refs.popupLoading.open('center'); }); }, /** * 废弃，页面路由使用不上 * 直接使用uni.navigateBack() */ popupLoadingClose() { this.$refs.popupLoading.close(); }, itemClick(type) { if (type == "mask" && this.info.isMaskClose != '1') { return; } //解决消息提示的自动消失返回的bug if (this.setTimeOut) clearTimeout(this.setTimeOut); uni.navigateBack(); uni.$emit("zy_common_dialog", type); } } }; $btncolor: #0081ff; page { background: transparent; } .mask-content { position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.4); .dialog-content { background-color: #FFFFFF; width: 580rpx; border-radius: 10rpx; .head-content { display: flex; align-items: center; justify-content: center; color: #343434; font-weight: bold; font-size: 32rpx; padding: 20rpx 30rpx; } .main-content { max-height: 330rpx; .info-content { min-height: 80rpx; padding: 10rpx 30rpx; color: #636463; font-size: 30rpx; display: flex; justify-content: center; align-items: center; } } .foot-content { display: flex; justify-content: center; align-items: center; height: 110rpx; .btn { font-size: 28rpx; border-radius: 66rpx; height: 66rpx; display: flex; justify-content: center; align-items: center; } &.alert { .btn { background-color: $btncolor; color: #FFFFFF; font-size: 28rpx; border-radius: 60rpx; height: 66rpx; width: 300rpx; padding: 0 40rpx; display: flex; justify-content: center; align-items: center; } } &.confirm { justify-content: space-around; .btn { min-width: 230rpx; &.active { background-color: $btncolor; color: #FFFFFF; } &.cancel { border: 1rpx solid $btncolor; color: $btncolor; border-radius: 66rpx; } } } } } }

2、工具类

2.1、dialog.js

export default { /* 链接处理 */ getLink(params) { let url = "/components/dialog/index"; if (params) { let paramStr = ""; for (let name in params) { paramStr += `&${name}=${params[name]}` } if (paramStr) { url += `?${paramStr.substr(1)}` } } return url; }, // 将URL参数分割为对象键值对 getParam(curParam){ // 拼接参数 let param = '' for (let key in curParam) { param += '&' + key + '=' + curParam[key] } // 把参数保存为对像 let obj = {} for (let key in curParam) { obj[key] = curParam[key] } return obj }, /* APP全局弹窗 */ dialog(params = {}, callback) { this.back(); uni.navigateTo({ url: this.getLink(params), success(e) { if (callback != null && typeof callback == "function") { uni.$off("zy_common_dialog"); uni.$on("zy_common_dialog", (type) => { callback && callback(type) }) } } }) }, /*弹出提示弹窗 */ alert(data = {}, callback, close) { let params = { dialogType: "alert", isCloseBtn: '0', isMaskClose: '0', isShow:true, ...data }; this.dialog(params, (type) => { if ("confirm" == type) { callback && callback() } else { close && close() } }) }, /*确认提示框弹窗 */ confirm(data = {}, confirm, cancel, close) { let params = { dialogType: "confirm", isCloseBtn: '0', isMaskClose: '0', isShow:true, ...data }; this.dialog(params, (type) => { if ("confirm" == type) { confirm && confirm() } else if ("cancel" == type) { cancel && cancel() } else if ("close" == type) { close && close() } }) }, /*确认提示框弹窗 */ dialogConfirm(data = {}, confirm, cancel, close) { let params = { dialogType: "dialogOpen", ...data }; this.dialog(params, (type) => { if ("confirm" == type) { confirm && confirm() } else if ("cancel" == type) { cancel && cancel() } else if ("close" == type) { close && close() } }) }, /*消息提示框 */ showMessage(data = {}) { let params = { dialogType: "messageOpen", isMaskClose: '1', ...data }; this.dialog(params) }, /** * 加载框 */ popupLoadingOpen(data = {}) { let params = { dialogType: "popupLoadingOpen", ...data }; this.dialog(params) }, back(isCheckPopupLoading=false){ //保证唯一弹窗 let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 if(routes.length>1){ let curRoute = routes[routes.length - 1].route //获取当前页面路由 if(curRoute=="components/dialog/index"){ if(isCheckPopupLoading){ let curParam = routes[routes.length - 1].options; //获取路由参数 let paramObj=this.getParam(curParam); if(paramObj.dialogType=="popupLoadingOpen") uni.navigateBack(); }else{ uni.navigateBack(); } } } } }

2.2、dialogUtils.js

import dialog from "@/components/dialog/dialog.js" module.exports = { /** * 弹出提示 */ alert(content = "", title = "提示", callback, confirmText = '确定') { // #ifdef APP-PLUS dialog.alert({ content, title, confirmText }, callback) // #endif // #ifndef APP-PLUS uni.showModal({ title, content, confirmText, showCancel: false, confirmColor: "#e03c31", success: callback }) // #endif }, /** * 确认提示框 */ confirm(content = "", confirm, cancel, confirmText = '确定', cancelText = '取消', title = "提示") { // #ifdef APP-PLUS dialog.confirm({ content, title, confirmText, cancelText, }, confirm, cancel) // #endif // #ifndef APP-PLUS uni.showModal({ title, content, cancelText, confirmText, confirmColor: "#e03c31", success: (e) => { if (e.confirm) { confirm && confirm() } else if (e.cancel) { cancel && cancel() } }, fail: (e) => { console.log(e) } }) // #endif }, /** * 确认提示框 * @property {String} content 对话框内容 * @property {function} confirm 对话框内容 */ dialogConfirm(content = "", confirm, cancel, confirmText = '确定', cancelText = '取消', msgType ='info', title = "提示") { // #ifdef APP-PLUS dialog.dialogConfirm({ content, title, confirmText, cancelText, msgType }, confirm, cancel) // #endif // #ifndef APP-PLUS uni.showModal({ title, content, cancelText, confirmText, confirmColor: "#e03c31", success: (e) => { if (e.confirm) { confirm && confirm() } else if (e.cancel) { cancel && cancel() } }, fail: (e) => { console.log(e) } }) // #endif }, showMessage(messageText, msgType="success") { // #ifdef APP-PLUS dialog.showMessage({ msgType, messageText }) // #endif // #ifndef APP-PLUS uni.showToast({ title: content, icon: 'none' }) // #endif }, popupLoadingOpen(popupContent = "加载中...") { // #ifdef APP-PLUS dialog.popupLoadingOpen({ popupContent }) // #endif // #ifndef APP-PLUS uni.showToast({ title: content, icon: 'none' }) // #endif }, popupLoadingClose() { dialog.back(true); } } 三、使用方式

1、在uniapp的根目录下的components创建以下三个文件

2、配置page.json文件

{ "path": "components/dialog/index", "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中定义全局变量，在原来的基础上添加以下代码

import dialog from '@/components/dialog/dialogUtils.js' export default { onLaunch: function() { uni['dialog'] = dialog; this.initApp() }

}

四、举例

1、提示弹窗

uni.dialog.alert("消息文本","提示",()=>{ uni.showToast({ title: '好的', icon:"none" }); },"好的");

2、确认弹窗

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

3、uniapp自带的确认弹窗

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

4、消息提示框---支持uniapp的组件的消息类型(success、info、error、warn)

uni.dialog.showMessage("1111");//默认sucess

uni.dialog.showMessage("1111","info");

uni.dialog.showMessage("1111","error");

uni.dialog.showMessage("1111","warn");

5、加载提示框

uni.dialog.popupLoadingOpen("正在努力加载中....");//打开加载框

uni.dialog.popupLoadingClose(); //关闭加载框

五、案例展示

1、

uni.dialog.confirm("是否提交?",()=>{ uni.dialog.popupLoadingOpen(); cancelForSAP(this.printing).then(res => { //清空数据 this.clearData(); uni.dialog.alert(res.data,"sap凭证");//显示sap凭证 }).finally(fi => { uni.dialog.popupLoadingClose(); }) });

【本文地址】

公司简介

联系我们