今日は、テーマの切り替え、国際言語の変更、ユーザー情報など、ヘッドのいくつかの機能について説明します。
まずテーマ切り替えコンポーネントを作成します
1. テーマ切り替えコンポーネント
テーマスイッチャーコンポーネント ThemePicker をコンポーネントディレクトリに作成します コードが多いためコードは貼り付けません 必要な場合はブロガーにプライベートメッセージを送ってください
コンポーネントのインポート
"@/components/ThemePicker" から ThemePicker をインポートします
トグルボタンを追加
画像の色を選択してテーマの色を変更できます
2. 言語切り替えコンポーネント
3. ユーザー情報パネル
Views ディレクトリの下に新しいコア ディレクトリを追加し、そのディレクトリの下に新しい PersonalPanel.vue を作成します。その後、ユーザー アバターをクリックしてユーザー情報パネルをポップアップします。
ヘッダーコンポーネント、ユーザー情報パネルコンポーネントに導入されました。
テストレンダリング:
4. システム通知パネル
Views ディレクトリの下のコア ディレクトリで、新しいシステム通知パネル NoticePanel.vue を作成し、システム通知コンポーネントをヘッダー コンポーネントに追加します。
ヘッダー コンポーネントに導入されました。
レンダリング:
5. ユーザープライベートメッセージパネル
Views ディレクトリの下のコア ディレクトリに新しい MessagePanel.vue を作成し、ヘッダー ツールバーにユーザー プライベート メッセージ コンポーネントを追加します。
ヘッダーコンポーネントで導入
レンダリング:
コードが多いのですべてGitにアップロードしましたので、必要な方はブロガーにプライベートメッセージを送ってください。