在mian.js添加水印全局函数方法
//水印
Vue.prototype.$watermark =function () {
var timer =setInterval(function () {
var defaultSettings = {
watermark_objName:"app",
watermark_txt:"专卖店小程序",
// watermark_txt: process.env.NODE_ENV == 'production'?this.waterTitle():'目标管理体验版111',
watermark_x:0,//水印起始位置x轴坐标
watermark_y:0,//水印起始位置Y轴坐标
watermark_rows:0,//水印行数
watermark_cols:10,//水印列数
watermark_x_space:40,//水印x轴间隔
watermark_y_space:50,//水印y轴间隔
watermark_color:'#333',//水印字体颜色
watermark_alpha:0.1,//水印透明度
watermark_fontsize:'0.32rem',//水印字体大小
// watermark_fontsize: '0.266667rem',//水印字体大小
watermark_font:'微软雅黑',//水印字体
watermark_width:95,//水印宽度
watermark_height:35,//水印长度
watermark_angle:20,//水印倾斜度数
};
// let userInfo = store.state.userInfo
// defaultSettings.watermark_txt = userInfo.real_name + ' ' + userInfo.emp_code
defaultSettings.watermark_txt ='名字' +' ' +'8889997'
//采用配置项替换默认值，作用类似jquery.extend
if (arguments.length ===1 &&typeof arguments[0] ==="object") {
var src = arguments[0] || {};
for (var keyin src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
continue;
else if (src[key])
defaultSettings[key] = src[key];
}
}
var obj =document.getElementById(defaultSettings.watermark_objName);
var oTemp =document.createDocumentFragment();
//获取页面最大宽度
var page_width = obj.offsetWidth; //Math.max(document.body.scrollWidth,document.body.clientWidth);
//获取页面最大长度
// var page_height = obj.children[0].offsetHeight;//Math.max(document.body.scrollHeight,document.body.clientHeight);
var page_height = obj.children[0].offsetHeight;//Math.max(document.body.scrollHeight,document.body.clientHeight);
//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols ==0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols -1)) > page_width)) {
defaultSettings.watermark_cols =parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
defaultSettings.watermark_x_space =parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols -1));
}
//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows ==0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows -1)) > page_height)) {
defaultSettings.watermark_rows =parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
defaultSettings.watermark_y_space =parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows -1));
}
var x;
var y;
for (var i =0; i < defaultSettings.watermark_rows -1; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
var mask_div_content =document.createElement('div');
for (var j =0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var haveIt =document.getElementById('mask_div' + i + j);
if (haveIt) {
haveIt.remove();// 如果已经生成了水印 就先移除所有元素重新生成
}
var mask_div =document.createElement('div');
let aaa = (i %2 ==0 ? x + defaultSettings.watermark_width : x)
if (aaa > page_width) {
// continue;
}
if (aaa > defaultSettings.watermark_width) {
aaa = aaa - defaultSettings.watermark_width -10
}
mask_div_content.style.left ='0px';
mask_div.style.left = aaa +'px';
mask_div.id ='mask_div' + i + j;
mask_div_content.className ='mask_div';
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
//设置水印div倾斜显示
mask_div_content.style.webkitTransform ="rotate(-" + defaultSettings.watermark_angle +"deg)";
mask_div_content.style.MozTransform ="rotate(-" + defaultSettings.watermark_angle +"deg)";
mask_div_content.style.msTransform ="rotate(-" + defaultSettings.watermark_angle +"deg)";
mask_div_content.style.OTransform ="rotate(-" + defaultSettings.watermark_angle +"deg)";
mask_div_content.style.transform ="rotate(-" + defaultSettings.watermark_angle +"deg)";
mask_div.style.visibility ="";
mask_div_content.style.position ="absolute";
// mask_div.style.left = x + 'px';
mask_div_content.style.top = y +'px';
mask_div_content.style.overflow ="hidden";
mask_div_content.style.zIndex ="0";
//让水印不遮挡页面的点击事件
mask_div_content.style.pointerEvents ='none';
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign ="center";
mask_div_content.style.width ='100%';
mask_div.style.width = defaultSettings.watermark_width +'px';
mask_div_content.style.height = defaultSettings.watermark_height +'px';
mask_div_content.style.display ="flex";
mask_div_content.style.justifyContent ="space-between";
mask_div.style.display ="inline-block";
mask_div_content.appendChild(mask_div);
}
oTemp.appendChild(mask_div_content);
}
//将水印添加到容器中
obj.children[0].appendChild(oTemp);
clearInterval(timer)
}, 500)
// 添加前先清空
}
然后再App.vue根页面监听路由，然后调用水印方法即可，简单易用
watch: { // 监听路由方法
$route() {
var _this =this;
var timer =setInterval(function () {
// 判断文档和所有子资源(图片、音视频等)已完成加载
if (document.readyState ==="complete") {
//执行方法
_this.showIcon =true;
_this.$nextTick(() => {
_this.$watermark();
});
clearInterval(timer);
}
}, 200);
},
}
每次路由加载就会触发水印函数，给页面添加水印了。