[Vue.js 3] 전체화면(Full Screen)

어쩌다보니 전체화면 코드가 필요하여 알아보게 되었다.

특정 엘리먼트만 전체화면으로 만들 수 있다는걸 몰랐는데 구글링하다 게시글을 보고 알게 되었다.

 

상위 컴포넌트에서 버튼을 클릭하면 boolean값이 변경된다.

하위컴포넌트에서 props로 받아 watch로 변경값이 있을 경우 이미지만 전체화면을 만드는 코드이다.

 

웹 화면

버튼 클릭하여 전체화면된 창

App.vue

<template>
  <nav>
    <button @click="fullScreen = !fullScreen">Full Screen</button>
  </nav>
  <router-view @ScreenChange="ScreenChange" :fullScreen="fullScreen" />
</template>
<script>
import { ref } from '@vue/reactivity';
export default {
  setup () {
    const fullScreen = ref(false); // boolean button 기본값 false
    function ScreenChange (value) { // emit으로 받아서 value 변경
      fullScreen.value = value;
    };
    return { fullScreen, ScreenChange }
  }
}
</script>

 

 

Home.vue

<template>
  <div class="home">
    <div  class="txt"><h2>Full Screen</h2></div>
    <div id="img"><img alt="Vue logo" src="../assets/logo.png"></div>
  </div>
</template>
<script>
import { watch } from '@vue/runtime-core';
export default {
  props: {
    fullScreen: { type: Boolean }
  },
  setup (props, { emit }) {
    watch(() => props.fullScreen, (newVal) => { // 변경값 감시
    // 지정된 id값만 가지고 전체화면 하기
      const img = document.getElementById('img');
      if (newVal === true) { // true -> 전체화면
          if (img.requestFullscreen) return img.requestFullscreen();
          if (img.webkitRequestFullscreen) return img.webkitRequestFullscreen();
          if (img.mozRequestFullScreen) return img.mozRequestFullScreen();
          if (img.msRequestFullscreen) return img.msRequestFullscreen();
      } else { // 전체화면 종료 시 emit으로 true 전달하여 다시 전체화면 가능하도록 작성함.
          if (document.exitFullscreen) { emit('fullScreenTrue', true); return document.exitFullscreen(); };
          if (document.webkitCancelFullscreen) { emit('fullScreenTrue', true); return document.webkitCancelFullscreen(); };
          if (document.mozCancelFullScreen) { emit('fullScreenTrue', true); return document.mozCancelFullScreen(); };
          if (document.msExitFullscreen) { emit('fullScreenTrue', true); return document.msExitFullscreen(); };
      }
    });
  }
}
</script>

 

git