自定义vue水印指令

水印在项目开发中经常会使用到，所以自己尝试写了一个vue版的自定义水印指令，包含功能：
1 自定义水印显示的文字
2 显示当前时间（可以设置是否显示时间时刻变化）
3 自定义位置
4 自定义角度
5 自定义透明度
6 自定义大小(宽度和高度)

直接上代码:

1 新建自定义指令文件，编写代码

watermark.js

import dayjs from 'dayjs'; // 时间格式化，需要自行下载，也可以使用其他代替，并且修改下方时间转换方法。
export default {
  install (Vue, Opt) {
    Vue.directive('watermark', (el, binding) => {
      let timer = null
      const addWaterMarker = ({text, time, width, height, rotate, positionX, positionY, opacity, isInterval}, el) => {
        const canvas = document.createElement('canvas')
        canvas.width = width || 400
        canvas.height = height || 200

        const canvasCon = canvas.getContext('2d')
        canvasCon.rotate(rotate || (-26 * Math.PI) / 180) // 旋转弧度
        canvasCon.font = '14px Microsoft JhengHei' // 字体
        canvasCon.fillStyle = `rgba(220, 220, 220, ${opacity || 0.45})` // 字体填充颜色
        canvasCon.textAlign = 'center' // 对齐方式
        canvasCon.textBaseline = 'Middle' // 基线
        canvasCon.fillText(text, positionX || canvas.width / 3, positionY || 180) // 被填充的文本

        const currentTime = isInterval ? Date.now() : time
        if (currentTime) canvasCon.fillText(dayjs(currentTime).format('YYYY-MM-DD HH:mm:ss'), positionX ||     canvas.width / 3, (positionY + 20) || 200)

        // 被填充的文本, pointeer-events为了解决水印遮盖按钮没法点击
        const watermarkCss =
          ` pointer-events: none;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 9;
            background: url(${canvas.toDataURL('image/png')});
          `

        const watermarkEle = document.createElement('div')
        watermarkEle.setAttribute('id', 'watermark')
        watermarkEle.style.cssText = watermarkCss
        el.style.position = 'relative'

        if (el.querySelector('#watermark')) {
          el.querySelector('#watermark').remove()
        }
        el.append(watermarkEle)
        if (!isInterval) {
          clearInterval(timer)
        }
      }

      const { text, time, width, height, rotate, positionX, positionY, opacity, isInterval } = binding.value
      const isHasWatermark = !!el.querySelector('#watermark')
      if (!isHasWatermark) {
        addWaterMarker({text, time, width, height, rotate, positionX, positionY, opacity, isInterval}, el)
        if (!isInterval) return
        timer = setInterval(() => {
          addWaterMarker({text, time, width, height, rotate, positionX, positionY, opacity, isInterval}, el)
        }, 1000)
      }
    })
  }
}

2 新建一个index.js文件，作为全局集中处理自定义指令

index.js

import watermark from './watermark';  // 可以修改对应的路径
export default {
  install (Vue, Opt) {
    Vue.use(watermark)；
    // 下方可以继续添加更多的指令
  }
}

3 main.js文件中引入index.js文件

import customDirectives from './customDirectives/index';
Vue.use(customDirectives)

4 水印指令使用

template

<div v-watermark='watermark'></div>

js

computed: {
    watermark () {
      return {
        text: '水印测试/这是一个水印测试',
        time: Date.now(),
        isInterval: true
      }
    }
  },

说明：上面是我自己定义的水印过程，下方贴出文件结构

 customDirectives // 文件夹
    index.js             // 文件，集中引入指令
    watermark.js     //水印指令