vue自定义指令实现页面添加水印

最近遇到个给页面添加水印的需求（之前没弄过也没见过这种效果），然后组长还要求我使用指令的方式实现，做到水印内容、样式基本可配置，说是以后再有这种需求的话就不用再开发了（嗯，道理我都懂，就是有点儿迷茫…）

先去vue官网看看自定义指令：


有了钩子和钩子参数，具体的就是怎么实现水印效果了。这里采用的是 canvas 的方式，具体的：

'use strict';

exports.__esModule = true;

/**
 * 自定义指令'v-watermark'
 * 可以传入自定义参数（v-watermark="markObj"），参数（markObj）格式为
 * {
 *      text: '水印内容',  // 水印文字内容
 *      angle: 25,  // 水印倾斜度
 *      color: 'rgba(0,0,0,.15)',  // 水印文字颜色
 *      fontSize: '16px',  //   水印文字大小
 *      top: 70  // 水印区域距离浏览器可视区域顶部的距离，单位px
 * }
 * 参数是可选的，不传的时候可以直接使用 v-watermark 指令即可
 */

// 记录上一次生成水印的 div 元素 id
let prevDivId = 0;

const number180 = 180;

// 生成水印
const setWatermark = markObj => {
   
    // 默认设置
    const defaultObj = {
   
        text: '水印内容',
        angle: 25,
        color: 'rgba(0,0,0,.15)',
        fontSize: '16px',
        top: 70
    }
    Object.assign