vue 页面添加水印使用笔记

watermark-dom
 

1、安装

npm install watermark-dom

2、使用

<script>
import watermark from 'watermark-dom'
export default {
  mounted () {
    watermark.init({ 
      watermark_txt:"一帆风顺，恭喜发财",  //水印的内容
      //watermark_color:'#5579ee',            //水印字体颜色
      watermark_x:0,                     //水印起始位置x轴坐标
      watermark_y:0,                     //水印起始位置Y轴坐标
      watermark_rows:0,                   //水印行数
      watermark_cols:0,                   //水印列数
      watermark_x_space:40,              //水印x轴间隔
      watermark_y_space:40,               //水印y轴间隔
      watermark_font:'微软雅黑',           //水印字体
      watermark_fontsize:'20px',          //水印字体大小
      watermark_alpha:0.5,               //水印透明度，要求设置在大于等于0.005
      watermark_angle:30,                 //水印倾斜度数
      watermark_width:110,                //水印宽度
      watermark_height:110,               //水印长度
      watermark_parent_width:0,      //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
      watermark_parent_height:0,     //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
      watermark_parent_node:null     //水印插件挂载的父元素element,不输入则默认挂在body上


     })
  },
}
</script>