工控人如何做自己的网站网页版微信文件传输助手

一、效果

完成效果，增加顶部导航栏，右侧用户信息(其中个人中心需要后续进行页面开发，这里只写了退出登录功能)，以及全屏功能

二、搭建并引入右侧组件

将右侧内容封装到单独的组件，直接引入(像左侧导航条等内容也是可以做成这种形式)

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 方法
• 状态可能不同步

设置文字提示

在文字提示部分，根据变量名设置退出全屏/全屏

在未全屏状态，文字提示为“全