如何使用screenfull实现全屏注意点

记录第一次做大屏可视化，实现全屏看网上说法进行操作，实际还是有很多的小问题。

问题1：下载后导入报错

看了一个大概是webpack需要修改，挺麻烦的。所以我们直接降级尝试下

解决办法

npm i screenfull@5.1.0

 接着正常导入即可

import screenfull from "screenfull/dist/screenfull";

 如何使用

其实很简单，直接cv下面即可

methods: {
    isScreenFull() {
      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
}

此时问题1 如果你是直接在mounted钩子函数使用就会报错 

 因为现在浏览器中，全屏功能需要用户的允许，为了能够请求全屏权限，你需要在用户的交互行为中进行，比如你可以添加点击事件 或者 鼠标事件等 

  <div class="box" @click="isScreenFull"> </div>

也就是在点击事件中执行全屏的方法。