【笔记】网站添加水印方法（watermark-dom）

安装

npm install watermark-dom

使用

在utils新建waterMark.js，在文件里引用

import waterMark from '@/utils/waterMark'

export default {
  mixins: [waterMark],
}

waterMark.js

import watermark from 'watermark-dom'

export default {
  name: 'watermark',
  data () {
    return {
      waterMarkDom: 'watermark'
    }
  },
  mounted () {
    window.initWaterMark = this.initWaterMark
    this.initWaterMark()
  },
  methods: {
    initWaterMark () {
      watermark.init({
		watermark_txt: 'xxxx水印',        // 水印的内容
		watermark_angle: 20,              // 水印倾斜度数
		watermark_x: 0,                   // 水印起始位置x轴坐标
		watermark_y: 0,                   // 水印起始位置Y轴坐标
		watermark_width: 160,             // 水印宽度
		watermark_height: 80,             // 水印长度
		watermark_x_space: 0,             // 水印x轴间隔
		watermark_y_space: 0,             // 水印y轴间隔
		watermark_rows:0,                 // 水印行数
		watermark_cols: 4,                // 水印列数
		watermark_alpha: 0.08,            // 水印透明度，要求设置在大于等于0.005
		watermark_font:'微软雅黑',        // 水印字体
		watermark_color:'black',          // 水印字体颜色
		watermark_fontsize: '.24rem',     // 水印字体大小
		watermark_parent_width: '16rem',  // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
		watermark_parent_height: '180vh', // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
		watermark_parent_node:null        // 水印插件挂载的父元素element,不输入则默认挂在body上
      })
    }
  }
}

最后

github地址