水印wartermark-dom

转载：segmentfault.com/a/119000001…

水印只加载一屏：blog.csdn.net/weixin_4505… ####使用方法

1. 下载水印包

npm install watermark-dom

2. 引入包

import watermark from 'watermark-dom' 或者 var watermark = require('watermark-dom')

3. 初始化

watermark.load({
    watermarl_txt: '要显示的文本',
    .....
})

4. 配置项

watermark_id: 'wm_div_id',          //水印总体的id
watermark_prefix: 'mask_div_id',    //小水印的id前缀
watermark_txt:"测试水印",             //水印的内容
watermark_x:20,                     //水印起始位置x轴坐标
watermark_y:20,                     //水印起始位置Y轴坐标
watermark_rows:0,                   //水印行数
watermark_cols:0,                   //水印列数
watermark_x_space:100,              //水印x轴间隔
watermark_y_space:50,               //水印y轴间隔
watermark_font:'微软雅黑',           //水印字体
watermark_color:'black',            //水印字体颜色
watermark_fontsize:'18px',          //水印字体大小
watermark_alpha:0.15,               //水印透明度，要求设置在大于等于0.005
watermark_width:100,                //水印宽度
watermark_height:100,               //水印长度
watermark_angle:15,                 //水印倾斜度数
watermark_parent_width:0,      //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
watermark_parent_height:0,     //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
watermark_parent_node:null     //水印插件挂载的父元素element,不输入则默认挂在body上

自己项目中使用

初始化（文本要求姓名+部门+时间）

export const getNowFormatDate = () => {
  let date = new Date();
  let seperator1 = '/';
  let year = date.getFullYear();
  let month: any = date.getMonth() + 1;
  let strDate: any = date.getDate();
  if (month >= 1 && month <= 9) {
    month = '0' + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = '0' + strDate;
  }
  var currentdate = year + seperator1 + month + seperator1 + strDate;
  return currentdate;
};
var watermarkDom = require('watermark-dom');
export const warterDom = (name: any, deptName: string, option = {}) => {
  watermarkDom.load({
    // watermark_id: 'home1', // 如果加id只会加载一屏，鼠标滚动，页面下部就没有水印，（也有解决方法，开头第二个链接）
    watermark_txt: `${name}-${deptName}` + `\n\n\n${getNowFormatDate()}`,
    watermark_color: '#5579ee',
    watermark_parent_width: document.body.scrollWidth - 320,
    watermark_parent_height: 0,
    watermark_fontsize: '13px',
    watermark_x_space: 90,
    watermark_width: 140,
    ...option
  });
};

调用(登陆时调用)

import Vue from 'vue';
import router from './index';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import UserStore from '@/store/modules/user';
import { warterDom } from '@/utils/addWaterMarker';

//  判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
  NProgress.start();
  let isLogined = UserStore.isLogined;
  // 判断是否需登录
  if (!isLogined) {
    UserStore.GET_USER_INFO().then(() => {
      Vue.nextTick(() => {
        warterDom(UserStore.userInfo.fullname, UserStore.userInfo.deptName);
      });
      next();
    });
  } else {
    next();
  }
});

router.afterEach(transition => {
  NProgress.done();
});

特殊性：因为项目中有弹窗，可能是因为层级问题，到目前这一步，弹窗是没有加上水印的，所以在弹窗页面再调用一遍

引入

import { warterDom } from '@/utils/addWaterMarker';

根据条件，合适的地方调用

 private created() {
    AppStore.GET_INFORMATION_MUST_LIST().then(() => {
      if (this.mustReadList.length === 0) {
        this.$data.dialogVisible = true;
        this.getMustReadData();
        warterDom(UserStore.userInfo.fullname, UserStore.userInfo.deptName, {
            watermark_id: 'home2' // 这句代码重新传了id，会形成两个不同的水印。不会影响整体的水印。
        })
      }
    });
  }