Fullscreen 전체 화면

전체 화면 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 특정 영역을 전체 화면으로 보여 줘야 할 때 사용해요.

기본 사용법

:::demo 전체 화면으로 만들 컨테이너를 <d-fullscreen> 태그로 감싸고, v-model로 전체 화면 상태를 제어해요. true를 넣으면 전체 화면이 시작되고, false로 설정하면 전체 화면을 빠져나와요. ESC 단축키로 전체 화면을 나올 수도 있어요. 이 예시에는 커스텀 z-index 레이어 사용법도 함께 보여 줘요.

<template>
  <d-fullscreen v-model="isOpen" :z-index="20">
    <div class="demo-fullscreen-container">
      <d-button @click="isOpen = !isOpen">{{ btnContent }}</d-button>
    </div>
  </d-fullscreen>
</template>
<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const isOpen = ref(false);
    const btnContent = ref('全屏');

    watch(isOpen, (newVal) => {
      if (newVal) {
        btnContent.value = '退出全屏';
      } else {
        btnContent.value = '全屏';
      }
    });

    return {
      isOpen,
      btnContent,
    };
  },
};
</script>
<style>
.demo-fullscreen-container {
  margin: 8px;
}
</style>

:::

전체 화면 모드

:::demo mode로 전체 화면 모드를 설정해요. 기본값인 normal은 일반 전체 화면으로, 전체 화면이 되면 컨테이너가 브라우저 창을 가득 채워요. mode를 immersive로 설정하면 몰입형 전체 화면이 켜져서 컨테이너가 모니터 화면 전체를 채워요.
일반 전체 화면이든 몰입형 전체 화면이든, ESC 단축키로 전체 화면을 나올 수 있어요.

<template>
  <d-fullscreen v-model="isOpenNormal" :z-index="20">
  <div class="demo-fullscreen-container">
      <d-button @click="isOpenNormal = !isOpenNormal">{{ btnContentNormal }}</d-button>
    </div>
  </d-fullscreen>
  
  <d-fullscreen v-model="isOpenImmersive" mode="immersive">
  <div class="demo-fullscreen-container">
      <d-button @click="isOpenImmersive = !isOpenImmersive">{{ btnContentImmersive }}</d-button>
    </div>
  </d-fullscreen>
</template>
<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const isOpenNormal = ref(false);
    const btnContentNormal = ref('普通全屏');

    watch(isOpenNormal, (newVal) => {
      if (newVal) {
        btnContentNormal.value = '退出全屏';
      } else {
        btnContentNormal.value = '普通全屏';
      }
    });

    const isOpenImmersive = ref(false);
    const btnContentImmersive = ref('沉浸式全屏');

    watch(isOpenImmersive, (newVal) => {
      if (newVal) {
        btnContentImmersive.value = '退出全屏';
      } else {
        btnContentImmersive.value = '沉浸式全屏';
      }
    });

    return {
      isOpenNormal,
      btnContentNormal,
      isOpenImmersive,
      btnContentImmersive,
    };
  },
};
</script>

:::

Fullscreen 파라미터

Fullscreen 슬롯

더 알아보기 (Learn more)

v-model 하나로 전체 화면을 켜고 끌 수 있어요. mode="immersive"를 쓰면 브라우저 창이 아니라 모니터 전체를 채우는 몰입형 전체 화면도 지원해요.