通常進入一個網頁如果轉圈時間超過一定的 3 秒，很容易讓使用者體感下降，但是有些資料載入就是需要一些時間，這時候如果有一些 loading 效果告知使用者，我有在跑，感謝您的耐心等候，感受就會差很多，甚至有些有趣的 loading 會讓人覺得等待是值得的！

(圖片來源：ZD Blog - Creative Loading Animations You Can’t Take Your Eyes Off)

#套件簡介

Vue-loading 是一個用於 Vue.js 框架的載入動畫和載入狀態管理的套件，可以幫助你在 Vue.js 應用程式中添加各種不同的載入效果，以提升使用者體驗，特別是當應用程式需要處理長時間請求或資料載入時。

vue-loading-overlay
https://github.com/ankurk91/vue-loading-overlay

#安裝流程

文件中有特別提及， Vue.js 版本不同安裝環境也不一樣，所以這裡要先確認自己使用的 Vue.js 版本：

因為使用 Vue3.js 所以要安裝 6.x 版本

npm install vue-loading-overlay@^6.0

#開始方法 && 使用方法

文件中有提到可以選擇將 vue-loading-overlay 應用於整個應用程式，或僅在特定的組件中使用，這樣也較具有彈性的配置，配置的方法個別介紹如下：

以元件方始引入使用

1. 需要載入 loading 元件的 .vue 掛上 Loading 元件

   <template>
       <div class="vl-parent">
           <Loading v-model:active="isLoading"  <--  雙向綁定是不是開啟狀態  -->
                    :can-cancel="true"          <--  可以按下「Esc」取消嗎？  -->
                    :is-full-page="fullPage"/>  <--  全頁 loading？  -->
   
           <label><input type="checkbox" v-model="fullPage">Full page?</label>
           <button @click.prevent="doAjax">fetch Data</button>
       </div>
   </template>
   
   <script setup>
   import Loading from 'vue-loading-overlay'
   import 'vue-loading-overlay/dist/css/index.css'
   
   const isLoading = ref(false)
   const fullPage = ref(true)
   
   function doAjax() {
     this.isLoading = true
     // simulate AJAX
     setTimeout(() => {
       this.isLoading = false
     }, 5000)
   }
   
   function onCancel() {
     console.log('User cancelled the loader.')
   }
   </script>
   

以元件方始引入使用

1. 在 main.js 註冊，就可以在任何頁面引入

   import {createApp} from 'vue';
   import {LoadingPlugin} from 'vue-loading-overlay';
   import 'vue-loading-overlay/dist/css/index.css';
   
   const app = createApp({});
   app.use(LoadingPlugin, {                // 可以在後面加上客製化樣式
     color: '#FF0000'
   })
   app.mount('#app');
   

2. 可以部分使用也可以全頁使用 loading，如果在使用的 .vue 中用 ref 的方法掛，以下是相關範例：

   <template>
       <form @submit.prevent="submit"
             class="vl-parent"
             ref="formContainer">
           <!-- your form inputs goes here-->
           <label><input type="checkbox" v-model="fullPage">Full page?</label>
           <button type="submit">Login</button>
       </form>
   </template>
   
   <script setup>
   import { ref, inject } from 'vue'
   import { useLoading } from 'vue-loading-overlay'      // 參照下方解說 (1)
   
   const fullPage = ref(true)
   const onCancel = ref(false)
   const formContainer = ref(null)
   const $loading = useLoading({
     // options
   })
   // or use inject without importing useLoading
   // const $loading =  inject('$loading')
   
   const submit = () => {
     const loader = $loading.show({                      // 參照下方解說 (2)
       // Optional parameters
       container: fullPage.value ? null : formContainer.value,
       canCancel: true,
       onCancel: onCancel.value
     })
     // simulate AJAX
     setTimeout(() => {
       loader.hide()                                    // 參照下方解說 (3)
     }, 5000)
   }
   </script>
   

   解說 (1) - useLoading
useLoading 會返回一個 $loading 例項，可以傳遞一個選項物件來設定 loading 畫面的行為和外觀。

   const $loading = useLoading({
     // 指定選項
     color: 'blue',                  // loading畫面的顏色
     backgroundColor: 'white',       // 背景顏色
     opacity: 0.8,                   // 透明度
     blur: '10px',                   // 背景模糊效果
     zIndex: 9999                    // loading畫面的層級
   });
   

   解說 (2) - $loading.show
$loading.show()：開啟 loading 用來顯示 loading 畫面。透過傳遞一個物件給 $loading.show() 函式來設定 loading 的條件。這個物件中的屬性可以根據檔案提供的鍵值去調整整個 loading 畫面的行為和外觀。

   Attribute	Type	Default	Description
   active	Boolean	false	默認顯示 loading 時 true，將其用作 v-model:active
   can-cancel	Boolean	false	允許用戶通過按 ESC 或單擊外部來取消
   on-cancel	Function	()=>{}	取消後做某事，與 can-cancel
   is-full-page	Boolean	true	當 false；將 loading 限制在其容器內
   transition	String	fade	過渡名稱 (Transition name)
   color	String	#000	自定義 loading 圖標的顏色
   height	Number		自定義 loading 圖標的高度
   width	Number		自定義 loading 圖標的寬度
   loader	String	spinner	圖標形狀的名稱， spinner 或者 dotsbars
   background-color	String	#fff	自定義疊加背景顏色
   opacity	Number	0.5	自定義疊加背景不透明度
   z-index	Number	9999	自定義疊加 z-index
   enforce-focus	Boolean	true	強制聚焦於 loading
   lock-scroll	Boolean	false	在全屏加載期間凍結滾動

   解說 (3) - loader.hide
   關閉 loading

Loading 的應用主要分成 3 部分：一是先前介紹的樣式框架 Bootstrap 和 Element-plus 也有 loading 樣式；二是使用客製化 loading 不要用套件，所以就拆分到明天再一一說明。