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

原文地址：https://blog.csdn.net/TZ1284063988/article/details/144102798

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！