這篇文章主要介紹了Vue進(jìn)度條組件怎么弄，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比柘榮網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式柘榮網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋柘榮地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

最近在個(gè)人的項(xiàng)目中，想對(duì)頁(yè)面之間跳轉(zhuǎn)的過(guò)程進(jìn)行優(yōu)化，想到了很多文檔或 npm 等都用到的頁(yè)面跳轉(zhuǎn)進(jìn)度條，于是便想自己去實(shí)現(xiàn)一個(gè)，特此記錄。

來(lái)看下 npm 搜索組件時(shí)候的效果：

so 下面咱們一起動(dòng)手實(shí)現(xiàn)一下唄。

定義使用方式

想實(shí)現(xiàn)一個(gè)組件的前提，一定要想好你的需求是什么，還要自己去定義一個(gè)舒服的使用方法，這其中也是有原則的，對(duì)使用者來(lái)說(shuō)，使用方式越簡(jiǎn)單越好。那么對(duì)應(yīng)的代價(jià)就是寫這個(gè)組件的復(fù)雜度會(huì)變高。

我想要的使用方式是這樣的：可以在任意的地方去調(diào)用到這個(gè)方法，可以隨時(shí)控制其狀態(tài)。

看下對(duì)應(yīng)的代碼：

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

當(dāng)然，想在任意地方使用，少不了一個(gè)步驟，就是在全局注冊(cè)這個(gè)組件：

import progressBar from 'xxx/progress-bar'

Vue.use(progressBar, { // some config ... })

如果不想全局注冊(cè)，你也可以在某個(gè)組件內(nèi)單獨(dú)使用，只要你開(kāi)心就好。

實(shí)現(xiàn)過(guò)程

先來(lái)建立一個(gè)文件夾和其中兩個(gè)文件：

progress-bar
    - 01 progress-bar.vue
    - 02 index.js

打開(kāi)progress-bar.vue，先來(lái)寫結(jié)構(gòu)和樣式，這里很簡(jiǎn)單：

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

<style scoped>
      .bar {
        position: fixed;
        z-index: 99999;
        opacity: 1;
      }
</style>

在注冊(cè)組件的時(shí)候，我想可以自定義一些功能，比如

• 成功的顏色

• 失敗的顏色

• 進(jìn)度條的位置

• 動(dòng)畫過(guò)渡時(shí)間

• 加載方向

• 高度

• 是否可以自動(dòng)完成

當(dāng)然只要你想到的都可以添加，那么這些可以定制的屬性，自然而然就成為了組件的 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  // 定義消失時(shí)間 ms
              },
              inverse: false,  // 進(jìn)度條的加載方向
              thickness: 2  // 進(jìn)度條的高度
            }
          }
        }
      }
}
</script>

除了要定義的屬性以外，那么組件本身總要有一些自己的屬性，用來(lái)控制自己的狀態(tài)，比如這個(gè)組件，你要控制進(jìn)度條的長(zhǎng)度、顯示和隱藏等狀態(tài)。

添加 vue 的 data 屬性：

data () {
      return {
      percent: 0,  // 進(jìn)度條長(zhǎng)度
            show: false, // 顯示和隱藏
            canSuccess: true  // 是否是成功的狀態(tài)
      }
}

有了這些屬性，這個(gè)進(jìn)度條就要根據(jù)這些屬性的變化來(lái)“自己動(dòng)”。所以這個(gè)時(shí)候首先想到的當(dāng)然就是 Vue 的計(jì)算屬性：

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 + '%'  // 設(shè)置進(jìn)度條長(zhǎng)度
    style.height = thickness + 'px'  // 設(shè)置顯示高度
    style.transition = `width ${widthSpeed}ms, opacity ${opacitySpeed}ms`  // 設(shè)置過(guò)度樣式

    return style
  }
}

到這里這個(gè) vue 組件其實(shí)就完成了，接下來(lái)就是如何去控制它。打開(kāi)index.js，先來(lái)寫一個(gè)標(biāo)準(zhǔn)的組件格式：

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

export default {
  install (Vue, options = {}) {
  // 注冊(cè)組件
    Vue.component(progressBar.name, progressBar)
  }
}

之后咱們要用到 Vue 提供的擴(kuò)展方法，來(lái)完成咱們的需求。

第一步，添加 autoFinish 屬性，用來(lái)設(shè)定動(dòng)畫是否可以自動(dòng)完成，默認(rèn)是 true，當(dāng)然如果某個(gè)路由或請(qǐng)求一直處于 pending 狀態(tài)，你可以可以設(shè)置讓其永遠(yuǎn)不完成動(dòng)畫的動(dòng)作。

第二步，來(lái)寫一個(gè)對(duì)象，其中包含 start 、 finish 、 fail 方法以及動(dòng)畫代碼。

第三步，將這個(gè)對(duì)象掛在到 Vue 的原型

完整的代碼和說(shuō)明如下：

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

export default {
  install (Vue, options = {}) {
    // 注冊(cè)組件
    Vue.component(progressBar.name, progressBar)

    // 創(chuàng)建一個(gè) Vue 子類
    const Component = Vue.extend(progressBar)
    // 拿到自定義的屬性
    const { autoFinish, ...res } = options
    // 創(chuàng)建組件實(shí)例
    const vm = new Component({
      data: {
        autoFinish: typeof autoFinish === 'boolean' ? autoFinish : true
      }
    })
    // 將 progressBar 的默認(rèn) options 與 自定義的 options 合并
    options = Object.assign(vm.$props.options, { ...res })

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

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

    let timer = null

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

        // 每次調(diào)用 start 都重新初始化一次，比如多次點(diǎn)擊某個(gè)按鈕連續(xù)請(qǐng)求，那么每次都從0開(kāi)始
        vm.percent = 0
        vm.show = true
        vm.canSuccess = true

        // 定一個(gè)增量，這個(gè)值可以改成參數(shù)，也可以按照使用經(jīng)驗(yàn)來(lái)設(shè)定
        const CUT_SCALE = 5

        // 定義每 100 秒來(lái)執(zhí)行一次動(dòng)畫
        timer = setInterval(() => {
          // 每次執(zhí)行增量動(dòng)畫
          this.increase((CUT_SCALE - 1) * Math.random() + 1)
          // 如果進(jìn)度大于 95%，并且設(shè)置了自動(dòng)完成，那么執(zhí)行結(jié)束動(dòng)作
          if (vm.percent > 95 && vm.autoFinish) {
            this.finish()
          }
        }, 100)
      },

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

      hide () {
        clearInterval(timer)
        // 這里面有2個(gè)定時(shí)器，外層定時(shí)器是讓用戶可以看到這個(gè) 進(jìn)度已經(jīng)完成啦
        // 內(nèi)層定時(shí)器，由于 opacity 消失需要一定的過(guò)渡時(shí)間，所以要等待它消失以后
        // 在將其進(jìn)度設(shè)置為0，等待下次調(diào)用，如果不延遲，那么會(huì)看到進(jìn)度到100后又回到0的動(dòng)畫
        setTimeout(() => {
          vm.show = false
          setTimeout(() => {
            vm.percent = 0
            timer = null
          }, vm.options.transition.opacitySpeed)
        }, vm.options.transition.duration)
      },

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

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

    // 最后掛在到全局
    Vue.prototype.$progress = progress
  }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Vue進(jìn)度條組件怎么弄內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

當(dāng)前文章：Vue進(jìn)度條組件怎么弄
文章地址：http://m.2m8n56k.cn/article34/ihgdse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)