はじめに
Vue.jsでローディング画面を実装する方法をサンプルコード付きでまとめました。
今回ローディングのモジュールはvue-loading-templateを使っています。
デモはこちらから確認出来ます。
環境
OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
vuex: 3.1.2
vuetify: 2.1.0
vue-loading-templateのインストール
$ yarn add vue-loading-template
1.src/App.vue
App.vue
<template>
<v-app>
<Loading v-show="loading"></Loading>
<Home v-show="!loading"></Home>
</v-app>
</template>
<script>
import Loading from '@/components/Loading'
import Home from './views/Home'
export default {
name: 'App',
data() {
return {
loading: true,
}
},
mounted() {
setTimeout(() => {
this.loading = false;
}, 1000);
},
components: {
Loading,
Home,
},
};
</script>
前提
-
Vuetifyを使用しているので、
<v-app>でくくられている -
Loadingはローディング画面コンポーネント -
Homeはアプリケーション本体をまとめているコンポーネント
ローディング画面の切り替え方法
-
v-showを使用し、変数loadingがtrueかfalseかでローディング画面の表示・非表示を行う -
切り替えは
mountedを使用 -
mountedはDOMの作成が完了した段階で発動するので、
DOMの作成が完了した段階でloadingがfalseになり、ローディング画面が非表示になる
2.src/components/Loading.vue
こちらがローディング画面のコンポーネントです。
Loading.vue
<template>
<div v-show="loading">
<div class="fullview">
<div class="loading-spacer"></div>
<vue-loading
type="spiningDubbles"
color="#aaa"
:size="{ width: '100px', height: '100px' }"
>
</vue-loading>
</div>
</div>
</template>
<script>
import { VueLoading } from 'vue-loading-template'
export default {
name: 'loading',
components: {
VueLoading,
},
}
</script>
<style>
.fullview {
width: 100%;
height: 100%;
background: #fefefe;
position: fixed;
top: 0;
left: 0;
}
.loading-spacer {
height: 30%;
}
</style>
-
VueLoadingをインポート -
<vue-loading>内で各種オプションを指定し、ローディングアニメーションの種類・色や大きさを指定 -
<div class="loading-spacer">はローディングアニメーションを画面上部から任意の位置に持ってくるために利用
おわりに
最後まで読んで頂きありがとうございました
ローディングアニメーションはspiningDubblesが好きです