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)
}

                        基础用法

        2.定义全屏按钮 

        3.定义执行的函数

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