[要件] システムページには透かしが表示されますが、ログインページには透かしがありません(ログアウト時にログインページに透かしは表示されません) 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL クラスター化インデックスのページ分割原理の分析例
>>: Linux CRM デプロイメント コードの詳細な説明
勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...
MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...
ステップ1:setting.pyでデータベースを変更する # データベースを構成する DATABAS...
最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...
目次序文1. コードによって設定されたデータベース名またはパスワードがローカルデータベースと一致して...
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
例: <html> <ヘッド> <スタイル タイプ="tex...
mysql が閉じない場合の解決策:コンピュータのタスクバーを右クリックしてタスクマネージャーを開き...
1. セットアップを始める次のコード関数を簡単に紹介します。 ref 関数を使用して変数の変更を監視...
目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...
MySQL のパフォーマンスに問題があると思われる場合は、通常、まずshow processlist...
目次1. 開発環境2. dockerプラグインをインストールする1. アイデアのインストール2. イ...
このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...
CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...
HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...