# [Vue.js] 載入待機畫面

###### tags: `Vue.js`

可以使用兩種方式，一種為fontawesome，另一種為vue.loading.overlay套件
https://www.udemy.com/course/vue-hexschool/learn/lecture/10896746#notes

### (1) vue.loading.overlay套件

* 安裝方式：npm
https://www.npmjs.com/package/vue-loading-overlay
* 載入main.js，以元件方式註冊在全域
* 將元件匯入Html裡的外側(temlate下層)並動態呼叫islaoding，之後再新增變數isloading為布林值，true則開啟false就關閉
* 在啟用頁面時(例抓取api資料時)，isloading設定為true，順利取得資料後則更改為false，就能成功顯示瀏覽待機的轉圈效果

### (2) fontawesome動態icon

* 安裝方式：建議使用cdn，載入index.html裡即可使用

    <link rel="stylesheet"
          href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
          crossorigin="anonymous">

* 新增一組布林值變數
* 選擇使用的動態瀏覽icon，寫入在需載入特效的位置，例如上傳照片
https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
* 在啟用函式裡匯入時就將變數設定為true，結束則反之，並在html上的icon使用v-if當變數為true則啟用效果，這麼一來瀏覽畫面就能順利呈現
* 補充，判斷標準除了布林值外，變數也能使用字串有值及無值為判斷依據，當有值時 == ture，無值反之。