전체화면 기능 구현

전체 화면 논리 구현

핵심 기술:

브라우저의 하단 레이어는 전체 화면을 활성화하고 전체 화면을 비활성화하는 API를 제공합니다.호환성 문제로 인해 커뮤니티의 성숙한 전체 화면 플러그인을 사용하여 기능을 구현합니다.

1 전체 화면 활성화: document.documentElement.requestFullscreen()

2 전체 화면 닫기: document.exitFullscreen()

핵심 아이디어(역동작)

현재 상태가 전체 화면이면 전체 화면을 닫습니다.
현재 상태가 전체화면이 아닌 경우 전체화면 열기
API 호출 후 현재 상태가 전체화면인지 전환

정적 구조 준비

<template>
  <div class="fullBox">
    <!-- 全局svg图表组件 icon-class指定渲染的图标-->
    <svg-icon icon-class="fullscreen" class="fullscreen" />
  </div>
</template>

<style scoped>
.fullBox{
  display: inline-block;
  margin-right: 20px;
  color: #fff;
}
</style>

암호

<svg-icon icon-class="fullscreen" class="fullscreen" @click="toggleScreen" />

<script>
export default {
  name: 'ScreenFull',
  data() {
    return {
      screenWrapper: false
    }
  },
  methods: {
    toggleScreen() {
      if (!this.screenWrapper) {
        document.documentElement.requestFullscreen()
         this.screenWrapper = true
       } else {
        document.exitFullscreen()
         this.screenWrapper = false
       }

      }
    }
  }
}
</script>

전체 화면 아이콘 전환 구현

아이콘의 성능은 현재 전체 화면과 일치해야 합니다.

<svg-icon
  :icon-class="screenWrapper? 'exit-fullscreen': 'fullscreen'"
  class="fullscreen"
  @click="toggleScreen"
/>

ESC 종료 듣기

기존 문제: 전체 화면을 종료하기 위해 브라우저 크로스 또는 ESC 키를 클릭하면 아이콘 아이콘이 수정되지 않은 것을 발견했습니다.이는 종료 후 브라우저가 자동으로 동기화되지 않기 때문에 현재 전체 화면을 수동으로 동기화해야 합니다. 화면 isScreenFull상태 주기isScreenFull

해결 방법: 모니터 브라우저가 전체 화면을 종료할 때 로컬 상태를 false로 변경

mounted() {
    document.addEventListener('fullscreenchange', e => {
      // 监听到屏幕变化，在回调中判断是否已退出全屏 如果已退出全屏 把本地状态修改为false
      let isFull = document.fullscreenElement
      if (!isFull) {
        this.isScreenFull = false
      }
    })
}

플러그인 구현
플러그인 구현의 이점
1 API는 호환성을 고려할 필요가 없습니다.
2 API 사용이 더 편리합니다.
3 전체 화면 플러그인: GitHub - sindresorhus/screenfull: JavaScript Fullscreen API의 크로스 브라우저 사용을 위한 간단한 래퍼 안정적인 v5 버전을 설치해야 합니다.
yarn add screenfull@ 5

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFull: false // flase 非全屏
    }
  },
  mounted() {
    // 这里有一个on方法 监控事件的触发 在事件触发的回调中让我们控制icon的状态和是否全屏保持一致
    screenfull.on('change', () => {
      this.isFull = screenfull.isFullscreen
    })
  },
  methods: {
    // 点击按钮切换全屏
    toggleScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    }
  }
}
</script>

전체화면 기능 구현

전체 화면 아이콘 전환 구현

ESC 종료 듣기

추천