当前位置：首页 > article >正文

elementui在任意页面点击消息，弹出消息对应页面处理弹窗

article 2024/12/23 20:29:11

需求：在系统的任意页面点击消息都能弹出对应页面中的操作弹窗

思路：

1、创建一个全局组件，这个组件要能在任何地方都被打开（所以放在了app.vue页面）

2、使用component 组件找到要打开的页面路径

3、在被打开的页面中创建方法并暴露出去，使第二步找到组件后能调用方法打开相应的弹窗

3.1、打开页面后要将页面中所有html都隐藏只保留弹窗

不足：这样会导致一个问题就是再打开的时候其实是两个页面，性能相对不好，并且也会加载被打开页面中的所有方法，这样浪费性能但是代码上统一性，而且也不会出现部分组件弹窗依赖接口太多需要一个一个写进去的问题

封装全局显示组件：

<template>
  <component v-if="dynamicComponent"
    ref="dynamicComponentRef"
    :parentObj="parentObj"
    :is="dynamicComponent.default"></component>
</template>
<script setup lang="ts">
const dynamicComponentRef: any = ref<HTMLElement | null>(null);
const dynamicComponent = ref<null | any>(null);
const parentObj = ref<msgUrlParams>();
// 预加载所有文件并映射地址
const modules = import.meta.glob('./views/**/*.vue');
const loadComponent = async (configObj: msgUrlParams) => {
  parentObj.value = configObj;
  try {
    dynamicComponent.value = await load(configObj.url);
    await nextTick();
    // 调用找到的组件的eventStack方法
    dynamicComponentRef.value?.eventStack(configObj);
  } catch (error) {
    console.error('加载组件失败:', error);
    dynamicComponent.value = null;
  }
};
const load = async (componentPath: string) => {
  try {
    // 使用 import.meta.glob 加载组件
    const path = componentPath.replace(/\.vue$/, '');
    const componentLoader = modules[`./views/${path}.vue`];
    if (!componentLoader) throw new Error(`Component not found: ${path}`);
    const module = await componentLoader();
    return module;
  } catch (error) {
    console.error('加载组件失败:', error);
    return null;
  }
};
defineExpose({
  loadComponent
});
</script>

在app.vue页面引入这个组件：

<HandleDialog ref="dialogRef"
  style="position: absolute;bottom:0 ;padding: 0;" />

// 消息弹窗
const dialogRef: any = ref<HTMLElement | null>(null);
const loadComponent = async (configObj: msgUrlParams) => {
  dialogRef.value.loadComponent(configObj);
};


// 将app.vue的方法注入到全局使得全局组件都能调用
provide('loadComponent', loadComponent);

调用：（如消息中心页面，首页的消息推送地方）

// 消息弹窗Url参数
interface msgUrlParams {
   eventId: string,//消息事件id
   url: string,//跳转url
   eventType: number,// '0:view'|'1:audit' | 'edit' | 'add' , // 事件类型
   eventParams: any,// 其他信息
 }
// 引入app的依赖
const loadComponent = inject('loadComponent') as any;
// 点击事件
const click(item:msgUrlParams)=>{
  const obj = {
    eventId: item.dataId, // 页面中弹窗数据的id
    url: item.msgLink, // 页面的路径
    eventType: item.msgState, // 处理状态
  };
  loadComponent(obj);
}

被调用的组件增加方法：

const isShowList = ref<boolean>(true);// 是否显示背景（把页面中的背景全部隐藏掉，这样加载这个组件的时候就会只显示弹窗了）
const eventStack = async (parentObj: msgUrlParams) => {
  isShowList.value = false;
   // 根据传入的操作事件 id 获取到操作事件的详情
  const res = await getMaint(parentObj.eventId);
   // 根据状态判断是调用哪个弹窗的方法
  if (parentObj.eventType == 1) {
    handleFlowCheck(res.data);
  } else if (parentObj.eventType == 0) {
    printView(res.data);
  } else if (parentObj.eventType == 2) {
    handleAdd();
  }
};

记得要把页面给隐藏了，弹窗还是能正常弹出