项目中用到了很多echart图表，进行了简单的组件封装，主要包含以下功能： 创建图表实例，渲染图表 支持传入自定义函数，可拿到图表实例，实现个性化功能 支持配置更新后图表自动刷新，可配置是清空后再刷新 loading状态控制 resize时图表更新 支持饼图默认高亮功能 实现 资源引入 echart资源按需引入 第三方组件引入（echarts-liquidfill，水波纹图表） /即下文中的@/modules/echartPlugin/ //https://echarts.apache.org/handbook/zh/basics/import%E6%8C%89%E9%9C%80%E...

最近在一个大屏项目遇到一个需求：用户可以通过一个按钮，触发页面部分模块全屏。通过以下API可以实现： Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。 且全屏状态变化会触发以下事件： fullscreenchange事件会在浏览器进入或退出全屏模式后立即触发。 基于以上API和事件，封装了一个简单的全屏hook： 响应式的全屏状态 可以指定元素进入/退出全屏模式 import{onMounted,onUnmounted,ref}from"vue"; exportdefaultfunctionuseFullScreen(){ //响应式...

SubScribe即发布订阅模式，在工作中有着广泛的应用，比如跨组件通信，微前端系统中跨子应用通信等等。 以下是一个简易的实现： 订阅 初始化时可限制类型 发布 限制类型是为了让订阅者和发布者知道预制了哪些类型，避免使用了一些对方不知道的类型。 typeSubscriber<T>=(param?:T)=>void exportdefaultclassSubScribe<P>{ //订阅数据仓库 publicsubscribers:Record<string,Subscriber<P>[]>={}; //可允许的事件类型 publict...

背景 项目中有一个系统使用的微前端，主站使用是vue2实现的，使用的是vue-router3.x。子应用有使用vue3实现的，使用的为vue-router4.x。该子应用中的页面A有通过操作按钮触发跳转到其他子应用页面B的需求，此时使用的是vue-router4.x的编程式导航API。当通过点击主站的Tab切换回B的时候，使用的是主站的vue-router.3.x，到目前为止，都很正常。但再次通过A的按钮触发跳转到B时，就会出现http://xxxxxundefined路径，导致页面空白。 分析 通过一步步断点，追踪问题。 第一次触发跳转时 第二次触发跳转时 当vue-router4.x进...