前端screenfull实现界面全屏展示功能

还是先引入依赖
我们要先执行

npm config set registry https://registry.npmjs.org/

将本地npm registry地址设置为官方的npm registry地址
不然这个东西安装会有点问题
然后我们执行命令安装

npm install screenfull

安装完之后 我们终端执行一下

npm config delete registry

将npm 地址还原默认设置
然后 我们编写组件代码如下

<template>
  <div id="app">
    <button @click="toggleFullscreen">全屏</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';
export default {
      
      
  name: 'App',
  data(){
      
      
    return {
      
      
    }
  },
  methods: {
      
      
    toggleFullscreen() {
      
      
      if (screenfull.isEnabled) {
      
      
        screenfull.toggle(); // 切换全屏状态
      } else {
      
      
        // 不支持全屏的处理逻辑
      }
    }
  }
}
</script>

首先 引入screenfull是肯定的 因为要他来实现功能
然后我们设置一个按钮点击调用screenfull的toggle实现全屏
但不是所有情况都支持这个逻辑 所以 我们需要先判断一下 避免报错
然后我们运行项目

我们尝试点击全屏

他会立刻占满整个屏幕 也是非常的好用