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) {
// 创建原生 View
nativePanel = 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();