二、使用svg 绘制

<div  ref="watermark">
<svg class="watermark" id="watermark" ref="watermark" viewBox="0 0 1920 1080" >
      <image
          id="bg"
          :xlink:href="pictureInfo.url"
          :x="pictureInfo.abscissa"
          :y="pictureInfo.ordinate"
          :width="pictureInfo.width"
          :height="pictureInfo.height"
          :opacity="pictureInfo.opacity/100"
          :transform="`rotate(${pictureInfo.rate})`"
          mode="scaleToFill"
          preserveAspectRatio="none"
      :x="textInfo.abscissa"
      :y="textInfo.ordinate"
      font-weight="bold"
      :font-size="textInfo.fontSize"
      :transform="`rotate(${textInfo.rate})`"
      :opacity="textInfo.opacity/100"
      :fill="textInfo.color"
      {{textInfo.text}}
    </text>
data () {
    return {
      pictureInfo: {
        url: null, // 图片信息
        abscissa: 0, // 横坐标
        ordinate: 0, // 纵坐标
        width: 500,
        height: 500,
        rate: 0, // 旋转角度
        opacity: 100 // 透明度
      textInfo: {
        text: '文字log',
        fontSize: 30, // 字号
        rate: 0, // 旋转角度
        abscissa: 40, // 横坐标
        ordinate: 40, // 纵坐标
        opacity: 100, // 透明度
        color: 'red'
三、使用 MutationObserver 防止水印被删除
 antiDeletion () {
      const targetNode = this.$refs.watermark
      const config = { attributes: true, childList: true, subtree: true, attributeOldValue: true }
      this.observer = new MutationObserver((mutationList, observer) => {
        for (let mutation of mutationList) {
          let type = mutation.type
          switch (type) {
            case 'childList':
              console.log(mutation)
              if (mutation.removedNodes.length > 0) { // 有删除
                mutation.target.append(mutation.removedNodes[0])
              break
            case 'attributes':
              break
            case 'subtree':
              break
            default:
              break
      this.observer.observe(targetNode, config)
在mounted 里引入
this.$nextTick(() => {
      if (!this.observer) {
        this.antiDeletion()
在beforeDestroy 销毁
 beforeDestroy () {
    this.observer.disconnect()
    this.observer = null