Splash 구현

어플리케이션을 구동하면 Loading이 될 때 스플레쉬화면이 잠깐 등장했다가 사라진다.

아무 동작 없는 것보단 모션이 있는 화면을 잠깐 띄웠다가 사라지게 해보자.

일단, 아래 명령으로 vue-splash 플러그인을 설치하자!

 

npm i vue-splash

 

사용법은 간단하며 자세한 내용은 https://www.npmjs.com/package/vue-splash에서 참고 바란다.

아래를 참고하여 splash-component를 만들어주자.

main.js

import Vue from 'vue' import VueSplash from 'vue-splash' Vue.use(VueSplash);

vue-splash를 이용하면 두근두근 느낌의 모션을 나타낼 수 있다.

splash-component

<template>   <vue-splash     :show="true"     :logo="logo"     title="Welcome to hyeon seok studio"     color="#F29661"     :size="300"     :fixed="true"   /> </template> <script> import YourLogo from "@/assets/hyeonseok_logo.png"; export default {   name: "splash-component",   computed: {     logo() {       return YourLogo;     }   } } </script>

해당 컴포넌트를 로딩할때 잠깐 나오도록 해보자. 이 또한 간단하다.

 

App.vue

<template>   <v-app v-if="!isLoaded">     <splash-component></splash-component>   </v-app>   <v-app v-else>     ...{생략}...   </v-app> </template> <script>   import SplashComponent from '@/components/splash-component'   export default {     components: {       SplashComponent     },     data: (e) => ({       isLoaded: false     }),     created() {       this.splashing()     },     methods: {       splashing() {         setTimeout(() => {           this.isLoaded = true         }, 2500)       }     }   } </script>

소스를 보면 처음에 splash-component를 띄우고 생성주기에 타이머를 이용해 꺼주기만하면 된다.