直接将下面文件作为水印文件waterMark.vue,传入inputType内容为水印展示的信息 目前直接渲染到id=blackList上,可以根据情况调整。
<template>
<div></div>
</template>
<script>
export default {
props: {
// 显示的水印文本
inputText: {
type: String,
default: "waterMark水印"
},
// 是否允许通过js或开发者工具等途径修改水印DOM节点(水印的id,attribute属性,节点的删除)
// true为允许,默认不允许
inputAllowDele: {
type: Boolean,
default: false
},
// 是否在组件销毁时去除水印节点(前提是允许用户修改DOM,否则去除后会再次自动生成)
// true会,默认不会
inputDestroy: {
type: Boolean,
default: false
}
},
data() {
return {
maskDiv: {} // 当前显示的水印div节点DOM对象
};
},
mounted() {
// 确认DOM渲染后再执行
this.$nextTick(() => {
// 创建水印节点
this.init();
if (!this.inputAllowDele) {
// 设置水印节点修改的DOM事件
this.Monitor();
}
});
},
methods: {
init() {
let canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.width = "200"; // 单个水印的宽高
canvas.height = "130";
this.maskDiv = document.createElement("div");
let ctx = canvas.getContext("2d");
ctx.font = "normal 18px Microsoft Yahei"; // 设置样式
ctx.fillStyle = "rgba(112, 113, 114, 0.1)"; // 水印字体颜色
ctx.rotate((30 * Math.PI) / 180); // 水印偏转角度
ctx.fillText(this.inputText, 30, 20);
let src = canvas.toDataURL("image/png");
this.maskDiv.style.position = "fixed";
this.maskDiv.style.zIndex = "9999";
this.maskDiv.id = "_waterMark";
this.maskDiv.style.top = "30px";
this.maskDiv.style.left = "0";
this.maskDiv.style.height = "100%";
this.maskDiv.style.width = "100%";
this.maskDiv.style.pointerEvents = "none";
this.maskDiv.style.backgroundImage = "URL(" + src + ")";
// 水印节点插到body下
document.getElementById("blackList").appendChild(this.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(this.callback);
observer.observe(body, options); // 监听body节点
},
// DOM改变执行callback
callback(mutations, observer) {
// 当attribute属性被修改
if (mutations[0].target.id === "_waterMark") {
this.removeMaskDiv();
}
// 当id被改变时
if (mutations[0].attributeName === "id") {
this.removeMaskDiv();
this.init();
}
// 当节点被删除
if (
mutations[0].removedNodes[0] &&
mutations[0].removedNodes[0].id === "_waterMark"
) {
this.init();
}
},
/* public */
// 手动销毁水印DOM
removeMaskDiv() {
document.body.removeChild(this.maskDiv);
},
// 手动生成水印
createMaskDiv() {
this.init();
}
},
watch: {
// 监听传入水印文本变化
inputText() {
this.$nextTick(() => {
this.removeMaskDiv();
});
}
},
destroy() {
// 组件销毁时去除生成在body节点下的水印节点
if (this.inputDestroy) {
this.removeMaskDiv();
}
}
};
</script>
复制代码