Umi微前端水印踩坑以及解决方案

最近公司需要在管理后台加一个水印方案~ 项目用的umi方案,以为就是改一个配置的问题,后来发现坑点还蛮多~ 希望此稳定能帮助到用umi 的你们.

一. 先来说说心路历程

坑点1

umi的水印适配只能在layout中进行配置,也就是路由配置中layout为false的页面无法配置水印,比如说登录页~

坑点2

就算只对layout配置也会有问题,如下是配置与效果

可以看到头部区域,菜单区域以及空白区域适配不到.

坑点3

既然配置不好处理,而umi用的是react的ant组件,那是不是可以用ant的水印组件Watermark去包裹根组件达到效果呢?
想法是好的. 实际情况是umi的app.tsx只是一个配置文件,它并没有暴露根组件,也就是说我们只能用原生js拿到根节点~ 但就算拿到根节点,你又如何去适配Watermark组件呢? 原生与jsx如何进行写法上的兼容?

坑点4

因为以上诸多不便,我不得不尝试寻找其它可替代方案. 比如去github上寻找原生相关的水印方案库~ 反复查找下锁定了一个start比较多的开源水印库:watermark-dom
这个库的优点是简单易用,对水印有保护策略的加持; 缺点是最新版本更新与2019年,对ts的兼容性不是很好,水印内容只能文本不能是图片,且适配不是很好,不能随着内容变化而变化,还会出现滚动条等问题~
所以这个库我们只能作为备选方案…

心路总结

基于以上心路,最后决定还是回到坑点3,尝试手动适配

二. 核心解决思路

1. 通过react18的createRoot,render出水印组件对应的dom
2. 通过MutationObserver监听dom的变化,并在异步回调中做处理
3. 拿到水印dom之后将其append到masteroot根节点之中
4. 存储水印文案，判断是否变化.
5. 变化了的话重复1步骤render创建水印,删除旧的水印,append新的水印dom
6. 最后通过observer.disconnect()注销监听

三. 实现代码

如下是我的最终调试代码,在app.tsx文件中调用即可

import { Watermark } from 'antd';
import { createRoot } from 'react-dom/client';
let oldval: string = '';
const creatWatermark = (content: string) => {console.log(oldval, content);if (oldval && oldval === content) return;const opt = {content: content,fontColor: 'red',fontStyle: 'normal',fontSize: 23,gapX: [30, 30],rotate: 10,};oldval = content;// 选择需要观察变动的节点const targetNode = document.createElement('div');// 解析AST&挂载(是异步,所以后续需要监听节点变化再做处理)createRoot(targetNode).render(<Watermark {...opt} />);// 观察器的配置（需要观察什么变动, childList只能向下观察到一级, subtree可多级 ）const config = { childList: true, subtree: true };// 当观察到变动时执行的回调函数const callback = (mutationsList: MutationRecord[],observer: MutationObserver,) => {for (let mutation of mutationsList) {if (mutation.type === 'childList') {const rootMaster = document.getElementById('root-master',) as HTMLElement;const newDom = targetNode?.childNodes[0]?.childNodes[0] as HTMLElement;if (newDom) {document.getElementById('watermark')?.remove();newDom.id = 'watermark';rootMaster.appendChild(newDom);observer.disconnect(); // 注销}}}};// 创建一个观察器实例并传入回调函数 MutationObserver的回调是微任务const observer = new MutationObserver(callback);// 以上述配置开始观察目标节点observer.observe(targetNode, config);// 方案二: 用动画帧刷新也可以(弃用)// const getFormRefLoop = () => {//   window.requestAnimationFrame(() => {//     const rootMaster = document.getElementById('root-master') as HTMLElement;//     const w = root?.childNodes[0]?.childNodes[0] as HTMLElement;//     if (rootMaster && w) {//       const old = document.getElementById('root');//       if (old) old.remove();//       w.id = 'root';//       rootMaster.appendChild(w);//     } else {//       getFormRefLoop();//     }//   });// };// getFormRefLoop();
};export default creatWatermark;

小结

demo地址
原创不易,转载请注明来源. 如果对你有帮助,收藏关注加点赞哦😝 当然如果大家有更好的解决方案,欢迎评论哦