【Vue3】でローディングアイコンを表示
自分の調べ方が悪かったのかもしれませんがローディングアイコン系のプラグインも Vue3 対応していなっかりでなかなかうまくいかなったのでしっかり対応していて使えるものの紹介をします。
こちらの vue-loading-overlay もこの記事を書いている段階ではまだ未対応の様。。。
VueElementLoading
今回自分が使ったのはこちらの vue-element-loading です。
色々オプションも選べて便利。
インストール
npm もしくは yarn で以下の様にインストールしてください。
npm install --save vue-element-loading@nextyarn add vue-element-loading@next使い方
git に書いてある通りですが自分は以下の様に main.js に記述し、グローバルで使えるコンポーネントとしてどこからでも使える様にしました。
import Vue from "vue";
import VueElementLoading from "vue-element-loading";
Vue.component("VueElementLoading", VueElementLoading);以下の様にフルスクリーンにしたりだとか色々オプションで指定するだけで形状を変えられる様です。
<body>
<vue-element-loading :active="show" is-full-screen />
</body>:active の部分のフラグを切り替えるとローディングアイコンの制御ができます。
短いですが以上でプラグインの紹介となります。
学習用書籍
Vue 3 対応してる書籍はあまり無いよなのでこちらをどうぞ↓
他にも基本を勉強できる本を紹介しておきます。
