在mian.js添加水印全局函数方法
//水印 Vue.prototype.$watermark = function () { var timer = setInterval(function () { // $('.mask_div').each(function () { // $(this).remove() // }) 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 key in 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: { // vue监听路由方法 $route() { var _this = this; var timer = setInterval(function () { // 判断文档和所有子资源(图片、音视频等)已完成加载 if (document.readyState === "complete") { //执行方法 _this.showIcon = true; _this.$nextTick(() => { _this.$watermark(); }); clearInterval(timer); } }, 200); }, },
大功告成啦!!!如果有什么更辨别的方法 随时可以留言