Vue 中实现点击进入F11全屏

一.浏览器方法

浏览器自带全屏方法 document.documentElement.requestFullscreen()，和退出全屏方法document.exitFullscreen()，判断是否全屏document.fullscreenElement如果不是全屏返回null。

1.document.fullscreenElement()

只读属性document.fullscreenElement 返回当前页面中以全屏模式呈现的 Element，如果当前页面未使用全屏模式，则返回 null。

尽管这个属性是只读的，但如果修改它，即使在严格模式下也不会抛出错误；它的 setter 方法是空操作将被忽略。

2. document.documentElement.requestFullscreen()

document.documentElement.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的Promise会 resolve，并且该元素会收到一个fullscreenchange事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的 promise 会变成 rejected 并且该元素会收到一个fullscreenerror事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。

3.document.exitFullscreen()

document.exitFullscreen()方法用于让当前文档退出全屏模式（原文表述不准确，详见备注）。调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。

备注： 如果一个元素 A 在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素 A 退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

二.定义全屏按钮

1.引入Element Plus

（1）安装

# NPM
$ npm install element-plus --save

（2）引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

（3）使用图标

# NPM
$ npm install @element-plus/icons-vue

（4）注册图标

需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

// 如果正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

基础用法

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>
</template>

2.定义全屏按钮

<div class="fullScreen">
    <el-icon :size="25" color="#fff" @click="fullScreen">
        <FullScreen />
    </el-icon>
</div>

3.定义执行的函数

const fullScreen = () => {
  let full = document.fullscreenElement;
  console.log(full);
  if (!full) {
    // document自带的全屏方法
    document.documentElement.requestFullscreen();
  } else {
    // document自带的推出全屏方法
    document.exitFullscreen();
  }
};