本文 GitHubhttps://github.com/qq449245884/xiaozhi已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

阻止人們離開我們的網站的一種方法是新增視覺反饋，讓他們知道我們的網頁正在載入而不是壞了。 視覺反饋還吸引了人們的注意力，因此等待時間似乎比靜態螢幕要短得多。

無論是新增微調動畫還是新增實際進度條，提供美觀的視覺元素都可以改善網站的效能，也會讓訪問者體驗更加的好。

對於Vue開發人員而言，有大量類似的庫供我們使用。

在本文中，分享 6 個我的最愛。

1. Vue Simple Spinner

github：https://dzwillia.github.io/vu...

顧名思義，這是一個非常簡單的元件，但功能仍然非常強大。Vue Simple Spinner提供了可定製載入樣式。 使用 props，我們可以控制對應的樣式：

• Size
• Background and foreground colors
• Speed
• Label Text
• Much more…

安裝命令：

npm install vue-simple-spinner--save.

然後，將其匯入到元件中，在模板中進行宣告，然後更改所需的 props:

<template>
   <vue-simple-spinner size="medium" />
</template>
<script>
import VueSimpleSpinner from 'vue-simple-spinner'
export default {
   components: { 
      VueSimpleSpinner
   }
}
 

效果如下：

2. Vue Radial Progress

github 地址：https://github.com/wyzantinc/...

如果你想要的是一個真正的進度條而不是旋轉動畫，Vue Radial Progress 一個非常棒的庫。

Vue Radial Progress 可以在在進度欄中設定步驟數以及使用者當前所處的步驟。 然後，根據完成的數量填充進度條的一定百分比。

具有平滑的動畫，可自定義的功能以及基於SVG的填充系統，當您具有包含多個離散步驟的非同步過程時，此庫將非常強大。

安裝：

npm install--save vue-radial-progress

此外，該庫使用元件插槽使圓內新增文字變得簡單

<template>
  <radial-progress-bar :diameter="200"
                       :completed-steps="completedSteps"
                       :total-steps="totalSteps">
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>

<script>
import RadialProgressBar from 'vue-radial-progress'

export default {
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10
    }
  },

  components: {
    RadialProgressBar
  }
}
</script>

3.Vue Loading Overlay

github:https://github.com/ankurk91/v...

Vue Loading Overlay是全屏載入元件的理想解決方案。 例如，如果應用程式包含某種儀表板，並且要等到所有資料載入完畢後再讓使用者四處點選，則此庫很有用。

這個庫還有一個好用的特性就是載入時，使用者點選遮罩，可以取消載入，並觸發一個事件，我們可以使用該事件取消正在執行的任何任務。

新增此功能，可以允許使用者自行決定任務何時花費太長時間來載入和退出。 這意味著他們不必離開頁面。

安裝命令：

npm install--save vue-loading-overlay

下面是 Loading Overlay library 使用示例：

<template>
    <div class="vld-parent">
        <loading :active.sync="isLoading" 
        :can-cancel="true" 
        :on-cancel="onCancel"
        :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>
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';
    
    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('User cancelled the loader.')
            }
        }
    }
</script>

4. Vue Progress Path

github 地址：https://github.com/Akryum/vue...

Vue Progress Path 是最流行的載入庫之一。由 Vue Core團隊成員Guillaume Chau建立，這也是我最喜歡使用的工具之一。

使用 SVG，Vue Progress Path 會建立成形的進度條。 它帶有幾個內建的形狀，但是最強大的功能是能夠傳遞我們自己的SVG形狀-這意味著無限的可能性。

使用npm i --save vue-progress-path將其新增到專案中，然後使用將該檔案全域性新增到src/main.js檔案中。

import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'

Vue.use(VueProgress, {
  // defaultShape: 'circle',
})

現在，來看看如何向元件新增進度 path 。

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  shape="semicircle"
  size="64"
/>

這個庫還有一個很好地方，更改樣式無須通過 props ，直接使用CSS程式碼來編輯樣式：

.vue-progress-path path {
  stroke-width: 12;
}

.vue-progress-path .progress {
  stroke: red;
}

5. Vue Loading Button

github 地址：https://github.com/shwilliam/...

Vue Loading Button 是一種簡單而有效的方式，可以向用戶顯示某些內容正在載入。

它所做的只是在按鈕被點選時新增一個轉輪動畫。但有了平滑的動畫，它可以建立一個無縫的外觀，使網站流行。

安裝：

npm install--save vue-loading-button

示例：

<template>
   <VueLoadingButton aria-label='Send message' />
</template>
<script>
import VueLoadingButton from 'vue-loading-button'

export default {
  components: {
    VueLoadingButton,
  }
}
</script>

6. TB Skeleton

github 地址：https://github.com/anthinking...

TBSkeleton 的體驗是非常好的。但是，這需要相當繁瑣的程式碼，也要合理的規劃元素。

我認為理解這一點的最好方法就是寫個例子。

首先，使用npm install --save tb-skeleton安裝。 然後，將下面內容新增到src/main.js檔案中。

import skeleton from 'tb-skeleton'
import  'tb-skeleton/dist/skeleton.css'
Vue.use(skeleton)

下面是 TBSkeleton 文件中的骨架元件示例。

<template>
  <div>
    <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">
     <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
   </skeleton>
  </div>
</template>
<script>
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      TbSkeleton,
      Skeleton
    }
  }
</script>

如上所見，如果要使用這個庫，需要一些時間成本，但在一些需要使用者體驗極好的需求裡，可以使用它。

~ 完，我是刷碗智，去刷碗咯了，下期見~

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具Fundebug。

原文：https://learnv.co/2020/02/6-v...

交流

有夢想，有乾貨，微信搜尋【大遷世界】關注這個在凌晨還在刷碗的刷碗智。

本文 GitHubhttps://github.com/qq44924588...已收錄，有一線大廠面試完整考點、資料以及我的系列文章。