vue全局添加水印，退出登录水印取消

vue全局添加水印，退出登录水印取消

新建util utils.js

/* 页面水印 */
const watermark = ({
container = document.body,
width = "300px",
height = "200px",
textAlign = "center",
textBaseline = "middle",
font = "20px Microsoft Yahei",
fillStyle = "rgba(184, 184, 184, 0.6)",
content = "",
rotate = "30",
zIndex = 1000,
} = {}) => {
const args = arguments[0];
const 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) / 2);
const base64Url = canvas.toDataURL();
const __wm = document.querySelector(".__wm");
const watermarkDiv = __wm || document.createElement("div");
const styleStr = `
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:${zIndex};
pointer-events:none;
background-repeat:repeat;
background-image:url('${base64Url}')`;
watermarkDiv.setAttribute("style", styleStr);
watermarkDiv.classList.add("__wm");
if (!__wm) {
container.style.position = "relative";
container.insertBefore(watermarkDiv, container.firstChild);
}
const MutationObserver =
window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
let mo = new MutationObserver(function () {
const __wm = document.querySelector(".__wm");
// 只在__wm元素变动才重新调用 __canvasWM
if ((__wm && __wm.getAttribute("style") !== styleStr) || !__wm) {
// 避免一直触发
mo.disconnect();
mo = null;
__canvasWM(JSON.parse(JSON.stringify(args)));
}
});
mo.observe(container, {
attributes: true,
subtree: true,
childList: true,
});
}
};
export default {watermark}

在main.js引入

import util from "./util/utils.js"
//content 水印内容
router.afterEach((item) => {
if (item.name !== 'login') {
if (sessionStorage.getItem('username')) {
util.watermark({
content: sessionStorage.getItem('username'),
});
}
}else {
util.watermark({
content: "",//如果当前是登录页，水印内容设置为空
});
}
})

最后

以上就是直率电源为你收集整理的vue全局添加水印，退出登录水印取消的全部内容，希望文章能够帮你解决vue全局添加水印，退出登录水印取消所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。