Vue.js 미지원화면 대체 컨텐츠 호출 시점 (라이프사이클)

반응형 (PC,태블릿,모바일) 웹브라우저 환경에서 미지원화면 대체 컨텐츠 노출 대응

모바일 가로모드 미지원시 대체화면이 노출되도록 대응하는 내용입니다.

 

NotSupport.vue라는 미지원대체화면 컨텐츠 파일생성

 

App.vue

- 루트 파일인 App.vue에서 NotSupport 연결

<!-- App.vue -->
<template>
	<NotSupport v-show="isNotSupport" id="isNotSupport"/>
</template>
<script>
import Vue from 'vue'
import NotSupport from './components/NotSupport.vue';

export default {
  	name : 'App',
    data () {
      return {
        isNotSupport: false,
      }
    },
    components : { 
      NotSupport,
    },
 
}
</script>

- 디바이스 감지에 대한 스크립트 

<!-- App.vue -->
<script>
export default { 
    ...

    methods : {
      // 미지원 대체화면
      srceenHandler() {
        // 모바일 & 태블릿 구분
        var mobileTablet = /Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/;

        // 세로모드 구분
        var isPortrait = window.innerWidth <= window.innerHeight;

        if (navigator.userAgent.match(mobileTablet)) {
          if (navigator.userAgent.match(/iPad|Android/i)) {
            // 아이패드, 안드로이드 OS
            if (window.matchMedia("(min-width: 361px) and (max-width: 600px)").matches) {
              if (isPortrait) {
                // 세로 모드일때 
                this.isNotSupport = false;
              } else {
                // 가로 모드일때
                this.isNotSupport = true;
              } 
            } else {
              this.isNotSupport = false;
            }

          } else if(navigator.userAgent.match(/iPhone|iPod/i)) {
            // 아이폰
            if (isPortrait) {
              // 세로 모드일때 
              this.isNotSupport = false;
            } else {
              // 가로 모드일때
              this.isNotSupport = true;
            } 
          } else {
            if (window.matchMedia("(max-width: 767px)").matches) {
              if (isPortrait) {
                // 세로 모드일때 
                this.isNotSupport = false;
              } else {
                // 가로 모드일때
                this.isNotSupport = true;
              } 
            } else {
              this.isNotSupport = false;
            }
          }
        } else { 
            // PC 
            if (window.matchMedia("(max-width: 767px)").matches) {
              if (window.innerWidth <= window.innerHeight) {
                // 세로 모드일때 
                this.isNotSupport = false;
              } else {
                // 가로 모드일때
                this.isNotSupport = true;
              } 
            } else {
              this.isNotSupport = false;
            }
        }
      },
  }
 
}
</script>

 

- 각 해당되는 라이프사이클에 screenHandler 이벤트 등록

// app.vue

export default {
  name : 'App',
  data () {
    return {
      isNotSupport: false,
    }
  },
  components : { 
  	NotSupport,
  },
  beforeCreate() {
    window.addEventListener('load', this.srceenHandler);
  },
  created: function() {
    window.addEventListener('load', this.srceenHandler);
    window.addEventListener('resize', this.srceenHandler);
  },
  mounted() {
    window.addEventListener('resize', this.srceenHandler);
	},
  beforeDestroy() {
    // 컴포넌트가 제거되기 직전 이벤트리스너 해제
    window.removeEventListener('resize', this.srceenHandler);
  },
 }