一、效果

完成效果，增加頂部導航欄，右側用戶信息(其中個人中心需要后續進行頁面開發，這里只寫了退出登錄功能)，以及全屏功能

二、搭建并引入右側組件

將右側內容封裝到單獨的組件，直接引入(像左側導航條等內容也是可以做成這種形式)

1、新建右側組件的頁面

在layout中新建一個vue界面

src/layout/right.vue

2、主頁面中引入右側組件

將原本的右側內容替換成封裝的右側組件，實現flex布局，并靠右側，并引入組件<right></right>

3、引入right組件

4、檢查是否引入成功

在right.vue界面中寫入內容

在主頁面中檢查是否出現

如下圖，可見出現了右側內容

三、實現全屏功能

1、引入全屏按鈕

 Icon 圖標 | Element Plus

2、添加到右側內容

復制全屏展示的圖標，粘貼到右側內容中

修改圖標大小

3、增加文字提示

參考官網

 Tooltip 文字提示 | Element Plus

引入文字提示

由于全屏按鈕靠右側，所以使用bottom-end比較好

加入文字提示內容

懸停效果

4、實現全屏功能

在圖標中加入全屏的點擊事件

圖標中寫入點擊事件便于執行全屏的方法

檢查是否處于全屏狀態

在js中寫入檢查是否處于全屏的狀態

寫入全屏切換功能 

獲取到當前是否是全屏狀態，然后根據這個狀態選擇進入全屏還是退出全屏

這里是對整個屏幕進行的全屏與取消全屏展示

補充：針對某個模塊進行全屏展示

這里使用頂部導航欄測試

在頂部導航條加入id值為test-full

修改需要開啟全屏的部分

展示效果 

完善全屏按鈕的文字提示

目前對于全屏按鈕的提示只有“全屏”，現在需要根據狀態修改文字提示

引入方法，設置變量

設置一個用于存儲是否全屏的狀態

更新狀態

在切換全屏狀態的方法中，更新變量值

設置監聽

避免出現以下問題

• 手動切換全屏時 UI 不會更新
• 某些瀏覽器可能不會觸發 toggleFullScreen 方法
• 狀態可能不同步

設置文字提示

在文字提示部分，根據變量名設置退出全屏/全屏

在未全屏狀態，文字提示為“全