Vue单页面实现水印功能

在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);

  },

}

每次路由加载就会触发水印函数，给页面添加水印了。