平台页面水印（姓名、日期、文字）及常用属性

效果图：

 

 水印内容包括：员工姓名、员工id、当前日期和文字

1、引入依赖 （package.json）

    "watermark-dom": "^2.3.0",

2、在首页渲染

我的姓名、id是存在cookie中的，可根据不同场景做修改

import watermark from 'watermark-dom';

export default {
  data (){
    return {
      userName:'',
      newTime: "",
    }
  },
  methods:{
    // 获取当前时间
    getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      this.newTime = `${year}-${month}-${day}`
    }
  },
  mounted() {
    this.getNowDate();
    let username = getCookie('userName');
    let ssoId = getCookie('ssoId');

    watermark.load({watermark_txt:`${username}
        ${ssoId}
      ${this.newTime}
       ${"请勿外传"}`,
      watermark_color:"grey",
      watermark_alpha:0.16,
      watermark_fontsize: '15px',
      watermark_x_space:100
    });
  }

3、附上水印常用属性

    watermark_txt:"text",
      watermark_x:20,//水印起始位置x轴坐标
      watermark_y:20,//水印起始位置Y轴坐标
      watermark_rows:5,//水印行数
      watermark_cols:10,//水印列数
      watermark_x_space:100,//水印x轴间隔
      watermark_y_space:100,//水印y轴间隔
      watermark_color:'#aaa',//水印字体颜色
      watermark_alpha:0.4,//水印透明度
      watermark_fontsize:'15px',//水印字体大小
      watermark_font:'微软雅黑',//水印字体
      watermark_width:210,//水印宽度
      watermark_height:80,//水印长度
      watermark_angle:15//水印倾斜度数