vue3: screenfull (full screen) principle and solution analysis

vue3: screenfull principle and solution analysis

principle

Forscreenfull, the browser itself provides the correspondingapi:

1.Document.exitFullscreen(): Used to request to switch from full screen mode to window mode

2.Element.requestFullscreen() : Used to request the browser to put a specific element (even extending to its descendant elements) into full-screen mode

ex: We can use document.getElementById('app').requestFullscreen() to set the area to full screen after obtaining id=app's DOM, but This method has some minor problems, such asappminregional background color change

So usually we will not use this API directly to achieve full screen, but use its packaging library screenfull

plan

1. Download dependenciesscreenfull

npm i screenfull 

2. Create componentsScreenfull.vue

<template>
  <div>
    <svg-icon
      :icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="onToggle"
    />
  </div>
</template>

<script setup>
import {
    
     onMounted, onUnmounted, ref } from 'vue'
import screenfull from 'screenfull'
// 是否全屏
const isFullscreen = ref(false)

// 监听变化
const change = () => {
    
    
  isFullscreen.value = screenfull.isFullscreen
}

// 切换事件
const onToggle = () => {
    
    
  screenfull.toggle()
}

// 设置监听器
onMounted(() => {
    
    
  screenfull.on('change', change)
})

// 删除监听器
onUnmounted(() => {
    
    
  screenfull.off('change', change)
})
</script>