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

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

[要件] システムページには透かしが表示されますが、ログインページには透かしがありません(ログアウト時にログインページに透かしは表示されません)

1. 透かしのJsファイルを作成する

/*
 * @著者: 劉暁児* @日付: 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'
    アウトウォーターマーク(文字列)
}
 
デフォルトの透かしをエクスポート

2. 導入操作

2.1 App.vueや他のページでの参照

// 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')
}

2.2 ルータ設定ファイル内の参照

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('ユーザー名が取得されていません') // 透かしのタイトルを設定します
 }
});

Vue のグローバル ウォーターマークの実装例に関するこの記事はこれで終わりです。Vue のグローバル ウォーターマークに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vueプロジェクトは特定の領域に透かしを描くことを実現する
  • Vueは透かし効果を簡単に実現します
  • Vueはカスタム命令を使用してページの下部に透かしを追加します
  • Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。
  • クラスを使用して透かしを作成およびクリアする Vue サンプルコード
  • Vue で画像と画像の透かしを隠しテキスト情報とともに使用する方法
  • Vueはページ透かし機能を実装
  • Vueはページに透かし効果を追加する機能を実装します

<<:  MySQL クラスター化インデックスのページ分割原理の分析例

>>:  Linux CRM デプロイメント コードの詳細な説明

推薦する

Linux FTP匿名アップロードとダウンロードが自動的に開始される問題を解決する

勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

Django がローカル MySQL データベースに接続する手順 (pycharm)

ステップ1:setting.pyでデータベースを変更する # データベースを構成する DATABAS...

k8sとDockerの関係についての簡単な説明

最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...

MySQL例外に対する一般的な解決策をいくつか分析する

目次序文1. コードによって設定されたデータベース名またはパスワードがローカルデータベースと一致して...

HTML チュートリアル: よく使われる HTML タグのコレクション (5)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

MySQLを閉じることができない問題を解決する方法

mysql が閉じない場合の解決策:コンピュータのタスクバーを右クリックしてタスクマネージャーを開き...

Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法

1. セットアップを始める次のコード関数を簡単に紹介します。 ref 関数を使用して変数の変更を監視...

WeChatミニプログラムでの仮想リストの実装例

目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...

MySQL 実行ステータスの表示と分析

MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...

IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)

目次1. 開発環境2. dockerプラグインをインストールする1. アイデアのインストール2. イ...

mysql インストーラ コミュニティ 8.0.12.0 インストール グラフィック チュートリアル

このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...

HTML コメント HTML 内のテキストコメントをマークするための記号

HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...