Avue cli后台模板页面内容全屏适配解决，涉及FullScreen API的使用、判断浏览器判断是否全屏、浏览器全屏和退出全屏以及CSS变量的使用等

最新推荐文章于 2023-11-03 11:51:56 发布

Hay-Zero

最新推荐文章于 2023-11-03 11:51:56 发布

阅读量1.7k

点赞数 1

分类专栏： AVUE Vue 文章标签： vue.js javascript css3 前端 sass

本文链接：https://blog.csdn.net/ZhangLinHao1997/article/details/108025481

版权

本文介绍了在Avue CLI后台模板中解决页面全屏适配问题的步骤，涉及监听全屏状态、使用FullScreen API、CSS变量以及如何处理avue-crud表格高度自适应。通过监听全屏状态，动态设置表格高度，并使用CSS变量实现高度的动态调整。作者分享了整个解决过程中的思考和代码实现，鼓励读者讨论更优方案。

摘要由CSDN通过智能技术生成

最近公司的一个项目已经到收尾阶段了，甲方提出来一个bug，bug的内容如下：

该项目前端框架选用的是基于Vue的Avue，后台模板也是直接使用的Avue的cli后台模板，在线体验点这里，代码地址点这里。

这个bug的主要问题就在于当点击全屏按钮的时候，页面的上avue-crud表格高度不会进行一个自适应，当时我第一想到的就是监听全屏状态，根据是否全屏动态去设置表格的高度。随后我找了找相应的监听全屏状态的文档，之后我找到了一篇解释相对完全的文章，地址在这里，博主总结的最后结论如下图

可以看到按F11按键启动的全屏几乎无法判断全屏的状态(直接放弃)，用FullScreen api启动的全屏可以通过isFullScreen判断全屏的状态，接下来就是找到该全屏按钮组件的位置/src/page/index/top/index.vue，结合现有代码才知道下一步要做什么，主要代码如下（全部代码请点击前面所说的地址）

<template>
  <div class="avue-top">
    <div class="top-bar__right">
      <el-tooltip v-if="showFullScren"
                  effect="dark"
                  :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
                  placement="bottom">