最近写项目遇到一个需求，全局显示水印，不管在哪个路由都要显示。

想要实现的效果：

新建shuiyin.js文件

// 定义水印函数
const addWatermark = ({container = document.body, // 水印添加到的容器，默认为 bodywidth = "200px", // 水印 canvas 的宽度height = "100px", // 水印 canvas 的高度textAlign = "center", // 水印文字的对齐方式textBaseline = "middle", // 水印文字的基线font = "16px Microsoft Yahei", // 水印文字的字体fillStyle = "rgba(184, 184, 184, 0.6)", // 水印文字的填充样式content = "我是水印", // 水印文字的内容rotate = -30, // 水印文字的旋转角度zIndex = 10000, // 水印的 z-index 值
}) => {// 生成水印 canvasconst canvas = document.createElement("canvas");canvas.setAttribute("width", width);canvas.setAttribute("height", height);const ctx = canvas.getContext("2d");ctx.textAlign = textAlign;ctx.textBaseline = textBaseline;ctx.font = font;ctx.fillStyle = fillStyle;ctx.rotate((Math.PI / 180) * rotate);ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 1);// 将 canvas 转换为 base64 URLconst base64Url = canvas.toDataURL("image/png");console.log(base64Url);const __wm = document.querySelector(".__wm");const watermarkDiv = __wm || document.createElement("div");const styleStr = `position: fixed;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;z-index: ${zIndex};pointer-events: none;background: url('${base64Url}') left top repeat;`;watermarkDiv.setAttribute("style", styleStr);watermarkDiv.classList.add("__wm");// 则创建一个 div 并设置样式和类名if (!__wm) {container.style.position = "relative";container.insertBefore(watermarkDiv, container.firstChild);}// 监听容器变化，当容器发生变化时重新调用 addWatermark 函数const { MutationObserver } = window;if (MutationObserver) {let mo = new MutationObserver(function () {const __wm = document.querySelector(".__wm");// 只在__wm元素变动才重新调用__canvasWMif ((__wm && __wm.getAttribute("style") !== styleStr) || !__wm) {// 避免一直触发mo.disconnect();mo = new MutationObserver(() => {});addWatermark({container: document.getElementById("app"),width: "200px",height: "100px",textAlign: "center",textBaseline: "middle",font: "16px Microsoft Yahei",fillStyle: "rgba(184, 184, 184, 0.3 )",content,rotate: -30,zIndex: 10000,});}});mo.observe(container, {attributes: true,subtree: true,childList: true,});}
};export default addWatermark;

main.js中全局注册

import addWatermark from "@/utils/shuiyin";
Vue.use(addWatermark);