[Vue]Mobile detect 적용방법

오늘은 화면진입을 했을때 접속기기가 핸드폰이나 태블릿인지를 인지해서 화면에서 처리하는 라이브러리를 소개하고자 합니다. 

설치방법

https://www.npmjs.com/package/mobile-detect

mobile-detect

해당하는 라이브러리를 설치해주세요. 

적용방법

간단히 소스로 설명해드릴께요.

<template>
  <div>
     <button type="button" v-if="isMobile">close</button>
  </div>
</template>

<script>
import MobileDetect from 'mobile-detect';
export default {
  name: 'CloseBtn',
  data: () => {
    return {
      isMobile: false,
    };
  },
  mounted()  
    const md = new MobileDetect(window.navigator.userAgent);
    if (md.mobile()) {
      this.isMobile = true;
    } else {
      this.isMobile = false;
    } 
  },
};
</script>

1. import MobileDetect from 'mobile-detect'; 로 라이브러리를 import한다.
2. const md = new MobileDetect(window.navigator.userAgent); new를 통해 MobileDetect 인스턴스를 생성한다.
3. md.mobile(), md.hpone(), md.tablet() 을 통해 필요한 기능을 적용할 수 있다. 

즐거운 코딩되세요.