vueプロジェクトは特定の領域に透かしを描くことを実現する

「厳密な使用」
 
定数ウォーターマーク = {}
 
/**
 *
 * @param {設定する透かしの内容} str
 * @param {透かしを設定するコンテナ} コンテナ
 */
const setWatermark = (str, コンテナ) => {
  定数id = '1.23452384164.123412415'
 
  if (コンテナ === 未定義) {
    戻る
  }
 
  // ページに存在するかどうかを確認し、存在する場合は削除します if (document.getElementById(id) !== null) {
    定数子要素 = document.getElementById(id)
    子要素.親ノード.子要素を削除します。
  }
 
  var containerWidth = container.offsetWidth // 親コンテナの幅を取得します。 var containerHeight = container.offsetHeight // 親コンテナの高さを取得します。 container.style.position = 'relative' // レイアウトを相対レイアウトに設定します。 // キャンバス要素を作成します (最初に背景画像を作成します)
  const can = document.createElement('canvas')
  can.width = 390 // 各ブロックの幅を設定します can.height = 200 // 高さ const cans = can.getContext('2d') // キャンバスを取得します cans.rotate(-20 * Math.PI / 180) // 反時計回りに π/9 回転します
  cans.font = '20px Vedana' // フォントを設定 cans.fillStyle = 'rgba(200, 200, 200, 0.20)' // フォントの色を設定 cans.textAlign = 'left' // テキストの配置 cans.textBaseline = 'Middle' // テキストのベースライン cans.fillText(str, 0, 4 * can.height / 5) // テキストを描画 // div 要素を作成 const div = document.createElement('div')
  div.id = id // id を設定
  div.style.pointerEvents = 'none' // すべてのイベントをキャンセル div.style.top = '0px'
  div.style.left = '0px'
  div.style.position = '絶対'
  div.style.zIndex = '100000'
  div.style.width = コンテナ幅 + 'px'
  div.style.height = コンテナの高さ + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') 左上繰り返し'
  container.appendChild(div) // ページに追加してIDを返す
}
 
// このメソッドは一度だけ呼び出すことができます watermark.set = (str, container) => {
  id = setWatermark(str, コンテナ) とします。
  間隔を設定する(() => {
    document.getElementById(id) が null の場合 {
      id = setWatermark(str, コンテナ)
    }
  }, 500)
  // ページサイズの変更をリッスンする window.onresize = () => {
    setWatermark(文字列、コンテナ)
  }
}
 
デフォルトの透かしをエクスポート

'@/external/watermark' から Watermark をインポートします

<div ref="directrecordwp" class="wrapper">

// ページの透かしを設定します Watermark.set('College Party and Government Cloud Record Management Platform' + this.name, this.$refs.directrecordwp)