基于vue的防删除水印组件

作者: bkbtp 分类: 前端 发布时间: 2019-02-27 17:34
<template>
  <div></div>
</template>
<script>
export default {
  props: {
    // 需要添加水印的容器
    id: {
      type: String,
      default: 'exportBox'
    },
    // 水印在容器中的top起始值
    top: {
      type: String,
      default: '0px'
    },
    // 水印在容器中的left起始值
    left: {
      type: String,
      default: '0px'
    },
    // 显示的水印文本
    inputText: {
      type: String,
      default: 'waterMark水印'
    },
    // 是否允许通过js或开发者工具等途径修改水印DOM节点(水印的id,attribute属性,节点的删除)
    // true为允许,默认不允许
    inputAllowDele: {
      type: Boolean,
      default: false
    },
    // 是否在组件销毁时去除水印节点(前提是允许用户修改DOM,否则去除后会再次自动生成)
    // true会,默认不会
    inputDestroy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      maskDiv: {} // 当前显示的水印div节点DOM对象
    }
  },
  mounted() {
    // 确认DOM渲染后再执行
    this.$nextTick(() => {
      // 创建水印节点
      this.init()
      if (!this.inputAllowDele) {
        // 设置水印节点修改的DOM事件
        this.Monitor()
      }
    })
  },
  methods: {
    init() {
      let canvas = document.createElement('canvas')
      canvas.id = 'canvas'
      canvas.width = '200' // 单个水印的宽高
      canvas.height = '130'
      this.maskDiv = document.createElement('div')
      let ctx = canvas.getContext('2d')
      ctx.font = 'normal 18px Microsoft Yahei' // 设置样式
      ctx.fillStyle = 'rgba(112, 113, 114, 0.1)' // 水印字体颜色
      ctx.rotate(30 * Math.PI / 180) // 水印偏转角度
      ctx.fillText(this.inputText, 30, 20)
      let src = canvas.toDataURL('image/png')
      this.maskDiv.style.position = 'absolute'
      this.maskDiv.style.zIndex = '9999'
      this.maskDiv.id = '_waterMark'
      this.maskDiv.style.top = this.top
      this.maskDiv.style.left = this.left
      this.maskDiv.style.height = '100%'
      this.maskDiv.style.width = '100%'
      this.maskDiv.style.pointerEvents = 'none'
      this.maskDiv.style.backgroundImage = 'URL(' + src + ')'
      // 水印节点插到body下
      // document.body.appendChild(this.maskDiv)
      // 将水印节点插入到特定组件里
      document.querySelector(`#${this.id}`).appendChild(this.maskDiv)
    },
    Monitor() {
      let body = document.getElementsByTagName('body')[0]
      let options = {
        childList: true,
        attributes: true,
        characterData: true,
        subtree: true,
        attributeOldValue: true,
        characterDataOldValue: true
      }
      let observer = new MutationObserver(this.callback)
      observer.observe(body, options) // 监听body节点
    },
    // DOM改变执行callback
    callback(mutations, observer) {
      // 当attribute属性被修改
      if (mutations[0].target.id === '_waterMark') {
        this.removeMaskDiv()
      }
      // 当id被改变时
      if (mutations[0].attributeName === 'id') {
        this.removeMaskDiv()
        this.init()
      }
      // 当节点被删除
      if (mutations[0].removedNodes[0] && mutations[0].removedNodes[0].id === '_waterMark') {
        this.init()
      }
    },
    /* public */
    // 手动销毁水印DOM
    removeMaskDiv() {
      // document.body.removeChild(this.maskDiv)
      document.querySelector(`#${this.id}`).removeChild(this.maskDiv)
    },
    // 手动生成水印
    createMaskDiv() {
      this.init()
    }
  },
  watch: {
    // 监听传入水印文本变化
    inputText() {
      this.$nextTick(() => {
        this.removeMaskDiv()
      })
    }
  },
  destroy() {
    // 组件销毁时去除生成在body节点下的水印节点
    if (this.inputDestroy) {
      this.removeMaskDiv()
    }
  }
}
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。