Vue のグローバル ウォーターマーク実装例

/*
 * @著者: 劉暁児* @日付: 2021-07-15 14:43:27
 * @最終編集時間: 2021-07-15 15:00:27
 * @LastEditors: LastEditorsを設定してください
 * @Description: 透かしを追加 * @FilePath: /huashijc_MeetingSys/src/common/warterMark.js
 */
「厳密な使用」
 
ウォーターマークを {} にします
 
setWatermark = (str) => {を設定します。
  id = '1.23452384164.123412415' とします
 
  document.getElementById(id) が null の場合:
    document.body.removeChild(document.getElementById(id))
  }
 
  can = document.createElement('canvas') とします。
  幅 = 250
  高さ = 120
 
  cans = can.getContext('2d') とします。
  缶を回転します(-15 * Math.PI / 150)
  cans.font = '20px ヴェダナ'
  cans.fillStyle = 'rgba(200, 200, 200, 0.20)'
  cans.textAlign = '左'
  cans.textBaseline = '中央'
  cans.fillText(str, can.width / 8, can.height / 2)
 
  div = document.createElement('div') とします。
  div.id = id
  div.style.pointerEvents = 'なし'
  div.style.top = '35px'
  div.style.left = '0px'
  div.style.position = '固定'
  div.style.zIndex = '100000'
  div.style.width = document.documentElement.clientWidth + 'px'
  div.style.height = document.documentElement.clientHeight + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') 左上繰り返し'
  ドキュメント本体に子要素を追加します。
  戻りID
}
 
// このメソッドは一度だけ呼び出すことができますwatermark.set = (str) => {
  id = setWatermark(str) とします。
  間隔を設定する(() => {
    document.getElementById(id) が null の場合 {
      id = setWatermark(str)
    }
  }, 500)
  ウィンドウのサイズ変更 = () => {
    ウォーターマークを設定する(文字列)
  }
}

const outWatermark = (id) => {
    document.getElementById(id) が null の場合:
      定数div = document.getElementById(id)
      div.style.display = 'なし'
    }
}
ウォーターマーク.out = () => {
    定数str = '1.23452384164.123412415'
    アウトウォーターマーク(文字列)
}
 
デフォルトの透かしをエクスポート

// 1.App.vue ファイルで、ファイルをインポートします。import Watermark from '@/common/watermark';

計算: {
  ユーザー名() {
    定数名 = this.$store.state.user.name
    return (name && name.length > 0) ? name : 'ユーザー名が取得されませんでした'
  }
},
マウント() {
  ウォーターマーク.set(this.userName)
}

// 2. 他のページで import Watermark from '@/common/watermark' を参照します。

作成された() {
  ウォーターマークを設定します('admin')
}

const outWatermark = (id) => {
  document.getElementById(id) が null の場合:
    定数div = document.getElementById(id)
    div.style.display = 'なし'
  }
}

router.afterEach((to) => {
 if(to.path == '/'){
  Watermark.out() // 透かしをクリア }else{
  Watermark.set('ユーザー名が取得されていません') // 透かしのタイトルを設定します
 }
});