Vueは透かし効果を簡単に実現します

序文：

Vueプロジェクトで透かし効果を使用するには、コンテナを指定できます

効果画像:

1. コンテナを指定しない

2. コンテナを指定する

実施方法：

1. 新しい設定ファイルwatermark.jsを作成します。これはutilか他の場所に配置できます。

ウォーターマークを {} にします
 
setWatermark = (テキスト、ソースボディ) => {
  id = Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000 とします。
 
  document.getElementById(id) が null の場合:
    document.body.removeChild(document.getElementById(id))
  }
 
  can = document.createElement('canvas') とします。
  幅 = 150
  高さ = 120
 
  cans = can.getContext('2d') とします。
  缶を回転します(-20 * Math.PI / 180)
  cans.font = '15px ヴェダナ'
  cans.fillStyle = 'rgba(0, 0, 0, .5)'
  cans.textAlign = '左'
  cans.textBaseline = '中央'
  cans.fillText(テキスト、can.width / 20、can.height)
 
  water_div = document.createElement('div') とします。
  water_div.id = id
  water_div.style.pointerEvents = 'なし'
  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') 左上繰り返し'
  if(ソースボディ){
    water_div.style.width = '100%'
    water_div.style.height = '100%'
    ソースボディ.appendChild(water_div)
  }それ以外{
    water_div.style.top = '3px'
    water_div.style.left = '0px'
    water_div.style.position = '固定'
    water_div.style.zIndex = '100000'
    water_div.style.width = document.documentElement.clientWidth + 'px'
    water_div.style.height = document.documentElement.clientHeight + 'px'
    document.body.appendChild(water_div)
  }
 
  戻りID
}
 
/**
 * このメソッドは一度だけ呼び出すことができます * @param:
 * @text == 透かしの内容 * @sourceBody == 透かしが追加される場所。渡されない場合は、本文になります
 * */
watermark.set = (テキスト、ソースボディ) => {
  id = setWatermark(テキスト、ソースボディ)
  間隔を設定する(() => {
    document.getElementById(id) が null の場合 {
      id = setWatermark(テキスト、ソースボディ)
    }
  }, 2000)
  ウィンドウのサイズ変更 = () => {
    ウォーターマークを設定する(テキスト、ソースボディ)
  }
}
 
デフォルトの透かしをエクスポート

2. main.js のグローバル設定

// Watermarkimport ウォーターマークを './utils/watermark.js' からインポートします
Vue.prototype.$watermark = 透かし

3. ページに全画面透かしを使用する

this.$watermark.set("Haoxing 2731")

4. ページ内で指定されたコンテナを使用する

<el-button @click="addWatermark">クリックして透かしを追加</el-button>
<div ref="content" style="幅: 500px;高さ: 500px;境界線: 1px solid #ccc;">
 ウォーターマークを追加します（）{
      this.$watermark.set("Haoxing 2731",this.$refs.content)
    }

5. フォント間の距離が大きすぎると思われる場合は、このプロパティを変更してください。