watermark-shadow-dom v1.0.2

watermark-shadowDOM

还在不断完善中.... 一个实现水印的简单易用的库 只需要把watermark-shadow-dom导入，再调用watermark方法，传入水印的配置就能再页面生成水印 使用shadow DOM制作水印，不影响原来的dom结构，实现样式和结构的分离。 注：本项目借鉴了https://github.com/saucxs/watermark-dom 在此基础上结合实际需求做了一些优化

使用方法

第一步：npm获取水印组件包：

npm install watermark-shadow-dom

第二步：引入水印模块：

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

第三步：在确保页面DOM加载完毕之后，调用watermark的load方法(手动加载):

   <script>watermark.load({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" })</script>

注意：我们提供了init方法，用来初始化水印，添加load和resize事件

   <script>watermark.init({ watermark_txt: "测试水印，1021002301，测试水印，100101010111101" })</script>

API介绍

<watermark.init({
   watermark_id: 'wm_div_id',          //水印总体的id
   watermark_prefix: 'mask_div_id',    //小水印的id前缀
   watermark_txt: "测试水印",             //水印的内容
   watermark_x: 20,                     //水印起始位置x轴坐标
   watermark_y: 40,                     //水印起始位置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_id: null,  //水印插件挂载的父元素id,不输入则默认挂在body上
   need_adapt_screen: false,     // 是否根据屏幕的分辨率等比变化每个水印的宽度和字体大小
   watermark_width_proportion: 15, // 每个水印宽度自适应屏幕变化的等比放大或缩小的值
   watermark_fontsize_proportion: 95, // 每个水印字体大小自适应屏幕变化的等比放大或缩小的值
})>