簡単にできる。Vue.jsでローディングを自作する方法
3689 回閲覧されました
みなさんこんにちは、 jonioです。
サイトのトップページを見た時にある内容が表示されて時間が経つとそれが非表示になってトップページが表示されるのをローディングと言いますが今回はローディングを自作する方法を解説します。
プラグインを使う解説をする人がいますが簡単なので必要ないです。
デモ
デモは↓になります。
最初「ローディング画面」と表示されていて時間が経つと「ローディング終わり」に切り替わります。
ファイルの用意
ローディングを使いたいファイル（index.vueとします）にローディング時の表示とローディング後の表示を用意します。
ローディング部分にフラグを用意する
表示・非表示を切り替える所にtrue・falseのフラグを用意しますがv-ifかv-showを使います。
v-ifとv-showの違いはフラグがfalseになった時にデベロッパーツール上でHTMLがなくなるのがv-ifで表示されているのがv-showです。
私は表示されない内容はデベロッパーツールで見る事ができない方がいいと思うのでv-ifを使います。
index.vueのコードを↓にします。
5行目でローディングのフラグを「loadingActive」にしてローディング画面を最初表示するために 「loadingActive」を「true」にするのを17行目で設定しています。
これでローディング画面が表示された状態になります。
ローディングが終わりの上にローディング画面が来る様にCSSの26行目〜32行目で位置を調節しています。
loadingActiveをfalseにするとローディング画面がなくなってローディングが終わりが表示されるのでその設定をしますが JavaScriptを使います。
フラグの切り替え
index.vueのコードを↓にします。
ローディングのフラグをtrueからfalseに切り替えるのを 23行目〜25行目で行っています。
これをページが表示されてから一定時間後行うのを28行目のsetTimeoutで行っています。
mountedを使う理由
28行目をなぜmontedの中に入れて実行しているかですが時間が経ってからメソッド（28行目）を行うのをv-onなどで直接的にやる方法がないからです。
こんな場合はmontedかcreatedを使いますがHTMLが表示されてから28行目の実行をしたいのでmountedを使います。
これで完成です。