手把手教你實現一個 Vue 進度條元件！

小橋流水嘩啦啦發表於2018-11-16
Vue元件

手把手教你實現一個 Vue 進度條元件！

最近在個人的專案中，想對頁面之間跳轉的過程進行優化，想到了很多文件或 npm 等都用到的頁面跳轉進度條，於是便想自己去實現一個，特此記錄。 來看下 npm 搜尋元件時候的效果：

手把手教你實現一個 Vue 進度條元件！

so 下面我們們一起動手實現一下唄。

定義使用方式

想實現一個元件的前提，一定要想好你的需求是什麼，還要自己去定義一個舒服的使用方法，這其中也是有原則的，對使用者來說，使用方式越簡單越好。那麼對應的代價就是寫這個元件的複雜度會變高。

我想要的使用方式是這樣的：可以在任意的地方去呼叫到這個方法，可以隨時控制其狀態。

看下對應的程式碼：

async someFunction () {
    this.$progress.start()
    try {
          const ret = await axios.get('/xxx')
          // some code ...
      this.$progress.finish()
    } catch (err) {
          // cache err ...
          this.$progress.fail()
    }
}
複製程式碼

當然，想在任意地方使用，少不了一個步驟，就是在全域性註冊這個元件：

import progressBar from 'xxx/progress-bar'

Vue.use(progressBar, { // some config ... })
複製程式碼

如果不想全域性註冊，你也可以在某個元件內單獨使用，只要你開心就好。

實現過程

先來建立一個資料夾和其中兩個檔案：

progress-bar
    - 01 progress-bar.vue
    - 02 index.js
複製程式碼

開啟progress-bar.vue，先來寫結構和樣式，這裡很簡單：

<template>
      <div :style='style'></div>
</template>

<style scoped>
      .bar {
        position: fixed;
        z-index: 99999;
        opacity: 1;
      }
</style>
複製程式碼

在註冊元件的時候，我想可以自定義一些功能，比如

  • 成功的顏色
  • 失敗的顏色
  • 進度條的位置
  • 動畫過渡時間
  • 載入方向
  • 高度
  • 是否可以自動完成

當然只要你想到的都可以新增，那麼這些可以定製的屬性，自然而然就成為了元件的 props：

export default {
  name: 'progressBar',
  props: {
    options: {
      type: Object,
      default () {
        return {
          succColor: 'rgb(76, 164, 214)',
          failColor: 'rgb(218, 26, 101)',
          position: 'top',
          transition: {
            widthSpeed: 200,
            opacitySpeed: 400,
            duration: 300  // 定義消失時間 ms
          },
          inverse: false,  // 進度條的載入方向
          thickness: 2  // 進度條的高度
        }
      }
    }
  }
}
</script>
複製程式碼

除了要定義的屬性以外，那麼元件本身總要有一些自己的屬性，用來控制自己的狀態，比如這個元件，你要控制進度條的長度、顯示和隱藏等狀態。

新增 vue 的 data 屬性：

data () {
      return {
      percent: 0,  // 進度條長度
            show: false, // 顯示和隱藏
            canSuccess: true  // 是否是成功的狀態
      }
}
複製程式碼

有了這些屬性，這個進度條就要根據這些屬性的變化來“自己動”。所以這個時候首先想到的當然就是 Vue 的計算屬性：

computed: {
style () {
// 先拿到亂七八糟的屬性
const { succColor, failColor, location, transition, inverse, thickness } = this.options
const { widthSpeed, opacitySpeed } = transition
const { canSuccess, preset, show } = this

// 定義 css 樣式
const style = {
  backgroundColor: canSuccess ? succColor : failColor,
  opacity: show ? 1 : 0
}

if (position !== 'top' || position !== 'bottom') {
  throw new Error('The wrong config of position!')
}

style[position] = 0

if (inverse) {
  style.left = 0
} else {
  style.right = 0
}

style.width = preset + '%'  // 設定進度條長度
style.height = thickness + 'px'  // 設定顯示高度
style.transition = `width ${widthSpeed}ms, opacity ${opacitySpeed}ms`  // 設定過度樣式

return style
}
}
複製程式碼

到這裡這個 vue 元件其實就完成了，接下來就是如何去控制它。開啟index.js，先來寫一個標準的元件格式：

import progressBar from './progress-bar.vue'

export default {
  install (Vue, options = {}) {
  // 註冊元件
    Vue.component(progressBar.name, progressBar)
  }
}
複製程式碼

之後我們們要用到 Vue 提供的擴充套件方法，來完成我們們的需求。

第一步，新增 autoFinish 屬性，用來設定動畫是否可以自動完成，預設是 true，當然如果某個路由或請求一直處於 pending 狀態，你可以可以設定讓其永遠不完成動畫的動作。

第二步，來寫一個物件，其中包含 start 、 finish 、 fail 方法以及動畫程式碼。

第三步，將這個物件掛在到 Vue 的原型

完整的程式碼和說明如下：

import progressBar from './progress-bar.vue'
export default {
 install (Vue, options = {}) {
// 註冊元件
Vue.component(progressBar.name, progressBar)

// 建立一個 Vue 子類
const Component = Vue.extend(progressBar)
// 拿到自定義的屬性
const { autoFinish, ...res } = options
// 建立元件例項
const vm = new Component({
  data: {
    autoFinish: typeof autoFinish === 'boolean' ? autoFinish : true
  }
})
// 將 progressBar 的預設 options 與 自定義的 options 合併
options = Object.assign(vm.$props.options, { ...res })

//合併新的 props
vm.$propsData = options
vm.$mount()

// 如果是服務端渲染那麼不繼續執行
if (!vm.$isServer) {
  document.body.appendChild(vm.$el)
}

let timer = null

const progress = {
  start () {
    if (Vue.$isServer) return

    // 每次呼叫 start 都重新初始化一次，比如多次點選某個按鈕連續請求，那麼每次都從0開始
    vm.percent = 0
    vm.show = true
    vm.canSuccess = true

    // 定一個增量，這個值可以改成引數，也可以按照使用經驗來設定
    const CUT_SCALE = 5

    // 定義每 100 秒來執行一次動畫
    timer = setInterval(() => {
      // 每次執行增量動畫
      this.increase((CUT_SCALE - 1) * Math.random() + 1)
      // 如果進度大於 95%，並且設定了自動完成，那麼執行結束動作
      if (vm.percent > 95 && vm.autoFinish) {
        this.finish()
      }
    }, 100)
  },

  increase (cut) {
    vm.percent = Math.min(99, vm.percent + cut)
  },

  hide () {
    clearInterval(timer)
    // 這裡面有2個定時器，外層定時器是讓使用者可以看到這個 進度已經完成啦
    // 內層定時器，由於 opacity 消失需要一定的過渡時間，所以要等待它消失以後
    // 在將其進度設定為0，等待下次呼叫，如果不延遲，那麼會看到進度到100後又回到0的動畫
    setTimeout(() => {
      vm.show = false
      setTimeout(() => {
        vm.percent = 0
        timer = null
      }, vm.options.transition.opacitySpeed)
    }, vm.options.transition.duration)
  },

  // 下面這2個方法就很簡單了，只需要完成進度，然後執行隱藏即可
  finish () {
    if (Vue.$isServer) return
    vm.percent = 100
    this.hide()
  },

  fail () {
    if (Vue.$isServer) return
    // 修改未成功的狀態，實際效果就是改變最後的顏色
    vm.canSuccess = false
    vm.percent = 100
    this.hide()
  }
}

// 最後掛在到全域性
Vue.prototype.$progress = progress
}
}
複製程式碼

到這裡，一個進度條元件就完成了。大家可以自己動手實踐一下，起一個專案，使用 vue-router 的 beforeResolve 宣告週期鉤子，或者寫一個定時器模擬非同步來測試一下。

以上是筆者歸納總結，如有誤之處，歡迎指出。

覺得本文對你有幫助？請分享給更多人

關注【妙味前端】加星標，關注更多內容

訂閱號ID：Miaovclass

關注妙味訂閱號：“妙味前端”，為您帶來優質前端技術乾貨；

相關文章