<template>
<router-view
v-waterMark="waterCode"
></router-view>
</template>
<script>
import waterMark from 'common/utils/watermark';
export default {
directives: {
waterMark: waterMark,
},
computed: {
waterCode() {
return {text: `平台机密数据`,
style: {
'width': 700, // 单个水印的宽
'height': 300, // 单个水印的高
'font': 'normal 22px Microsoft Yahei', // 设置样式
'fillStyle': 'rgba(112, 113, 114, 0.1)', // 水印字体颜色
'rotate': (30 * Math.PI / 180), // 水印偏转角度
},
};
},
},
};
</script>
/**
* @file 网页水印
*/
/*eslint-disable*/
let watermark = {
text: 'text',
style: {},
isAllowDele: false,
maskDiv: '',
init: (text) => {
let canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = watermark.style.width; // 单个水印的宽高
canvas.height = watermark.style.height;
watermark.maskDiv = document.createElement('div');
let ctx = canvas.getContext('2d');
ctx.font = watermark.style.font; // 设置样式
ctx.fillStyle = watermark.style.fillStyle; // 水印字体颜色
ctx.rotate(watermark.style.rotate); // 水印偏转角度
// convas 设置换行
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
return;
}
var context = this;
var canvas = context.canvas;
if (typeof maxWidth == 'undefined') {
maxWidth = (canvas && canvas.width) || watermark.style.width;
}
if (typeof lineHeight == 'undefined') {
lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
}
// 字符分隔为数组
var arrText = text.split('');
var line = '';
for (var n = 0; n < arrText.length; n++) {
var testLine = line + arrText[n];
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = arrText[n];
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
};
ctx.wrapText(watermark.text, 30, 20);
let src = canvas.toDataURL('image/png');
watermark.maskDiv.style.position = 'fixed';
watermark.maskDiv.style.zIndex = '9999';
watermark.maskDiv.id = '_waterMark';
watermark.maskDiv.style.top = '60px';
watermark.maskDiv.style.left = '0';
watermark.maskDiv.style.height = '100%';
watermark.maskDiv.style.width = '100%';
watermark.maskDiv.style.pointerEvents = 'none';
watermark.maskDiv.style.backgroundImage = 'URL(' + src + ')';
// 水印节点插到body下
document.body.appendChild(watermark.maskDiv);
},
// 防删机制
monitor: () => {
let body = document.getElementsByTagName('body')[0];
let options = {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
}
let observer = new MutationObserver(watermark.callback);
observer.observe(body, options); // 监听body节点
},
// DOM改变执行callback
callback: (mutations, observer) => {
// 当attribute属性被修改
if (mutations[0].target.id === '_waterMark') {
watermark.removeMaskDiv();
}
// 当id被改变时
if (mutations[0].attributeName === 'id') {
watermark.removeMaskDiv();
watermark.init();
}
// 当节点被删除
if (mutations[0].removedNodes[0] && mutations[0].removedNodes[0].id === '_waterMark') {
watermark.init();
}
},
/* public */
// 手动销毁水印DOM
removeMaskDiv: () => {
document.body.removeChild(watermark.maskDiv);
},
render: () => {
// let maskBox = document.querySelector('#_waterMark');
if (!watermark.maskDiv) {
watermark.init();
// 是否允许通过js或开发者工具等途径修改水印DOM节点(水印的id,attribute属性,节点的删除),true为允许, 默认不允许
if (!watermark.isAllowDele) {
// 设置水印节点修改的DOM事件
watermark.monitor();
}
}
}
}
export default {
bind(el, binding, vnode) {
const options = binding.value;
watermark.style = options.style;
watermark.text = options.text;
watermark.isAllowDele = options.isAllowDele;
watermark.render();
},
update(element, data) {
if (data.value.text !== data.oldValue.text) {
watermark.text = data.value.text;
watermark.removeMaskDiv();
watermark.render();
}
},
};