1: ScreenFull principle and scheme analysis

Screenfull (full screen) function implementation

Principle:

For ScreenFull, the browser already provides an API for screenFull, which you can view here. The API provides two main methods:

  1. Document.exitfullscreen () : This method is used to request a switch from full-screen mode to window mode
  2. Element.requestFullscreen(): This method is used to request the browser (User Agent) to put a particular element (and even its descendants) in full-screen mode
    1. For example, we can passdocument.getElementById('app').requestFullscreen()In obtainingid=app 的 DOMAfter that, set the area to full screen

But usually we don’t use the API directly for full-screen effects, instead we use its wrapper, ScreenFull

Solution:

So clear good principle, the next implementation of the scheme is relatively easy.

The overall scheme is divided into two steps:

  1. encapsulationscreenfullcomponent
    1. Display switch button
    2. Implement switching function based on ScreenFull
  2. Importing the component

2: Implementation: screenfull

Once we have a clear plan, we will implement the plan

encapsulationscreenfullComponents:

  1. Download the dependency package ScreenFull

    NPM I [email protected]Copy the code

  2. Create components/Screenfull/index

      <template>
   <div>
     <el-button @click="onToggle"
       >Click {{isFullscreen? "exit-fullscreen" : "fullscreen" }}</el-button ></div>
 </template>

 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
 import screenfull from "screenfull";

 // Full screen
 const isFullscreen = ref(false);

 // Listen for changes
 const change = () = > {
   isFullscreen.value = screenfull.isFullscreen;
 };

 // Switch events
 const onToggle = () = > {
   screenfull.toggle();
 };

 // Set the listener
 onMounted(() = > {
   screenfull.on("change", change);
 });

 // Delete the listener
 onUnmounted(() = > {
   screenfull.off("change", change);
 });
 </script>

 <style lang="scss" scoped></style>
Copy the code

    Importing the component

    <screenfull class="right-menu-item hover-effect" />
import Screenfull from "@/components/Screenfull";
Copy the code