Implement click to enter F11 full screen in Vue

1. Browser method        

        The browser comes with the full-screen method document.documentElement.requestFullscreen(), and the exit full-screen method document.exitFullscreen() to determine whether it is full-screen. If document.fullscreenElement is not full-screen, it returns null.

        1.document.fullscreenElement()

        Read-only attribute document.fullscreenElement Returns the Element presented in full-screen mode on the current page. If the current page does not use full-screen mode, returns null.

        Although this property is read-only, if you modify it, no error will be thrown even in strict mode; its setter method is a no-op and will be ignored.

        2. document.documentElement.requestFullscreen()

         The document.documentElement.requestFullscreen() method is used to issue an asynchronous request to make the element enter full-screen mode.

        Calling this API does not guarantee that the element will enter full-screen mode. If the element is allowed to enter full-screen mode, the returned Promise will resolve and the element will receive a fullscreenchange event to notify that it has entered full-screen mode. If the fullscreen request is rejected, the returned promise becomes rejected and the element receives a fullscreenerror event. If the element has been detached from the original document, the document will receive these events.

        3.document.exitFullscreen()

        The document.exitFullscreen() method is used to exit the full-screen mode of the current document (the original text is not accurate, please see the remarks for details). Calling this method will return the document to the state before the previous call to the Element.requestFullscreen() method to enter full-screen mode.

        Remarks: If an element A already has other elements in the full-screen state before requesting to enter the full-screen mode, when the element A exits the full-screen mode, the previous elements will still be in the full-screen state. state. The browser maintains a stack of full-screen elements internally for this purpose.

2. Define the full screen button

        1.Introduction of Element Plus

                (1) Installation

# NPM
$ npm install element-plus --save

                (2) Introduction

// 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) Use icons

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

                (4) Registration icon

                        You need to import all icons from @element-plus/icons-vue and register them globally.

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

                        Basic usage

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

        ​ ​ 2. Define the full screen button 

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

        3. Define the function to be executed

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