MutationObserver在頁面水印實現起到的作用詳解

import type { Directive, App } from 'vue'
interface Value {
  font?: string
  textColor?: string
  text?: string
}
const waterMarkId = 'waterMark'
const canvasId = 'can'
const drawWatermark = (el, value: Value) => {
  const {
    font = '16px Microsoft JhengHei',
    textColor = 'rgba(180, 180, 180, 0.3)',
    text = '三心大菜鳥',
  } = value
  // 建立一個canvas標籤
  const canvas = document.getElementById(canvasId) as HTMLCanvasElement
  // 如果已有則不再建立
  const can = canvas || document.createElement('canvas')
  can.id = canvasId
  el.appendChild(can)
  // 設定寬高
  can.width = 400
  can.height = 200
  // 不可見
  can.style.display = 'none'
  const ctx = can.getContext('2d')!
  // 設定畫布的樣式
  ctx.rotate((-20 * Math.PI) / 180)
  ctx.font = font
  ctx.fillStyle = textColor
  ctx.textAlign = 'left'
  ctx.textBaseline = 'middle'
  ctx.fillText(text, can.width / 3, can.height / 2)
  // 水印容器
  const waterMaskDiv = document.createElement('div')
  waterMaskDiv.id = waterMarkId
  // 設定容器的屬性樣式
  // 將剛剛生成的canvas內容轉成圖片，並賦值給容器的 background-image 樣式
  const styleStr = `
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url(${can.toDataURL('image/png')})
  `
  waterMaskDiv.setAttribute('style', styleStr)
  // 將水印容器放到目標元素下
  el.appendChild(waterMaskDiv)
  return styleStr
}
const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr，後面可以用來對比
    el.waterMarkStylestr = drawWatermark(el, value)
  }
}

<div 
    v-watermark="
    { 
    text: '水印名稱',
    textColor: 'rgba(180, 180, 180, 0.3)' 
    }
    "
  >

const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr，後面可以用來對比
    el.waterMarkStylestr = drawWatermark(el, value)
    // 先定義一個MutationObserver
    el.observer = new MutationObserver(() => {
      const instance = document.getElementById(waterMarkId)
      const style = instance?.getAttribute('style')
      const { waterMarkStylestr } = el
      // 修改樣式 || 刪除div
      if ((instance && style !== waterMarkStylestr) || !instance) {
        if (instance) {
          // div還在，說明只是修改style
          instance.setAttribute('style', waterMarkStylestr)
        } else {
          // div不在，說明刪除了div
          drawWatermark(el, value)
        }
      }
    })
    // 啟動監控
    el.observer.observe(document.body, {
      childList: true,
      attributes: true,
      subtree: true,
    })
  },
  unmounted(el) {
    // 指定元素銷燬時，記得停止監控
    el.observer.disconnect()
    el.observer = null
  },
}