uniapp配置全局消息提醒

1.H5使用根标签插入dom的方式实现。
2.app端使用plus.nativeObj.View的方式绘制实现

H5端

创建组件orderAlert.vue

<template><div class="view"><div class="content" v-if="visible"><div class="message">{{ message }}</div></div></div>
</template>
<script>
export default {data() {return {visible:false}},props: ['message'],methods: {	open() {this.visible = true;},close() {this.visible = false;console.log(this.visible);}}
}
</script>
<style lang="stylus" scoped>
.content {position: absolute;top: 70rpx;left: 0%;width: 100%;background-color: #ea3e49;border-radius: 10rpx;color: #fff;opacity: 0.95;z-index: 1000000;.message {line-height: 50rpx;font-weight: 700;font-size: 18rpx;text-align: center;}
}
</style>

创建createDialog.js

import { createVNode, render } from 'vue';
import orderAlert from '@/components/common/orderAlert/orderAlert.vue';export function createDialog(options) {console.log(options);// 创建 DOM 容器const container = document.createElement('div');document.getElementById('app').appendChild(container);// 创建组件实例const vnode = createVNode(orderAlert, {...options,onClose: () => {// 销毁组件render(null, container);document.body.removeChild(container);}});// 渲染组件render(vnode, container);// 获取组件实例const instance = vnode.component?.proxy;console.log(instance);// 返回组件实例以调用 open 方法instance.open();setTimeout(()=>{instance.close() },3000)return instance;
}

全局调用
import {
createDialog
} from “@/utils/createDialog.js”

createDialog({message: 'hello'
})

app端

创建nativePanel.js

let nativePanel = null;/*** 显示顶部悬浮消息* @param {string} message - 消息内容* @param {object} options - 配置选项* options.backgroundColor: 背景颜色 (默认: #ea3e49)* options.textColor: 文字颜色 (默认: #ffffff)* options.fontSize: 文字大小 (默认: 18rpx)* options.duration: 自动隐藏时间 (默认: 2000ms)*/
export function showNativePanel(message, options = {}) {const {backgroundColor = "#ea3e49",textColor = "#ffffff",fontSize = "18px",duration = 2000,} = options;// 将 rpx 转换为 px（假设屏幕宽度为 750rpx）const rpxToPx = (value) => (value / 750) * plus.screen.resolutionWidth;const styles = {top: `${rpxToPx(70)}px`,left: "0px",width: `${plus.screen.resolutionWidth}px`,height: `${rpxToPx(100)}px`,};if (!nativePanel) {// 创建原生 ViewnativePanel = new plus.nativeObj.View("nativePanel", {top: styles.top,left: styles.left,width: styles.width,height: styles.height,});// 绘制背景矩形nativePanel.drawRect({color: backgroundColor,radius: `${rpxToPx(10)}px`,});// 绘制文字nativePanel.drawText(message,{top: "0px",left: "0px",width: styles.width,height: styles.height,},{size: fontSize,color: textColor,align: "center",verticalAlign: "middle",weight: "bold",});// 显示面板nativePanel.show();// 自动隐藏setTimeout(() => {hideNativePanel();}, duration);} else {// 更新面板内容nativePanel.draw([{tag: "rect",color: backgroundColor,rectStyles: { radius: `${rpxToPx(10)}px` },position: {top: "0px",left: "0px",width: styles.width,height: styles.height,},},{tag: "font",text: message,textStyles: {size: fontSize,color: textColor,align: "center",verticalAlign: "middle",weight: "bold",},position: {top: "0px",left: "0px",width: styles.width,height: styles.height,},},]);nativePanel.show();// 自动隐藏setTimeout(() => {hideNativePanel();}, duration);}
}/*** 隐藏顶部悬浮面板*/
export function hideNativePanel() {if (nativePanel) {nativePanel.hide();}
}

全局调用

	import { showNativePanel, hideNativePanel } from "@/utils/nativePanel.js";showNativePanel('消息消息消息消息', {backgroundColor: "#ea3e49",textColor: "#ffffff",fontSize: "18px",duration: 3000, // 显示 3 秒
});//主动隐藏
hideNativePanel();