前端实现控制浏览器全屏显示

iinssb�

已于 2023-02-15 11:22:24 修改

阅读量440

点赞数

文章标签：前端 html javascript

于 2023-02-15 10:21:29 首次发布

本文链接：https://blog.csdn.net/qq_52684464/article/details/129038567

版权

通过原生JS方式实现

document.documentElement.requestFullscreen() // 开启全屏
document.exitFullscreen() // 关闭全屏

通过全屏插件实现

// 安装插件
$ npm i screenfull
// 导入
import ScreenFull from 'screenfull'
// 使用
 if (!ScreenFull.isEnabled) {
      // 此时全屏不可用
      this.$message.warning('此时全屏组件不可用')
      return
    }
    //   如果可用 就可以全屏
   ScreenFull.toggle()

使用该screenfull插件时因版本原因报错，解决途径：卸掉后换成5.1.0 npm install --save-dev screenfull@5.1.0 换成5.1.0 就可以了