30 vue-toasted 라이브러리 사용

source: categories/study/vue-experiance/vue-experiance_9-20.md

30. vue-toasted 라이브러리 사용

30.1 src/main.js

현재 toast-popup은 vue-toasted 라이브러리를 사용하고 있다.
사용 법은 Vue 인스턴스를 불러와서

//toast
import Toasted from 'vue-toasted';
Vue.use(Toasted, {
  position: 'bottom-center',
  duration : 300000,
  singleton: true // JIRA-397 이슈 수정 옵션
})

이런식으로 플러그인 등록을 해주고

사용할 곳에서

import Vue from ‘vue';
Vue.toasted.show(‘메시지'); 

이런식으로 작성하면 옵션에 정의한대로 3초 아래에서 위로 나타나고 사라진다.

30.2 현재 적용되어있는 vue-toasted 예시

현재 프로젝트에선 보통 API 호출 후 상태를 말해주기위해서 vue-toasted가 쓰이고있다.

ㅇㄱ등록에서의 토스트팝업은 src/api/index.js 파일에서 제어

현재 ㅇㄱ등록에 토스트팝업은 src/api/index.js 파일에서

// 5000, 5100 > 에러 메시지 토스트로 띄우기
const toastCode = ['5000','5100', '5020'];
if(toastCode.some(item=>String(code) === item)){
  debounce(()=> {
    Vue.toasted.show(message);
  });
}

이 부분으로 제어하고 있다.