Vueプログレスバーコンポーネントの実装チュートリアル（コード例）

この記事の内容は、Vue プログレス バー コンポーネントの実装チュートリアル (コード例) です。必要な方は参考にしていただければ幸いです。

最近、個人プロジェクトでページ間のジャンプ処理を最適化したいと思い、多くのドキュメントや npm で使用されているページジャンププログレスバーを思い出したので、自分で実装したいと思ったので記録します。 。

npm によるコンポーネント検索の効果を見てみましょう:

それでは、一緒に実装してみましょう。

使用方法の定義

コンポーネントを実装する場合は、ニーズを考慮して自分で快適な使用方法を定義する必要があります。ユーザーにとって、使い方はシンプルであるほど良いのです。その代償として、このコンポーネントの作成の複雑さが増します。

私がこれを使用したい方法は次のとおりです。このメソッドはどこからでも呼び出すことができ、いつでもそのステータスを制御できます。

対応するコードを見てください:

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

もちろん、これをどこでも使用したい場合は、このコンポーネントを登録するという 1 つの手順が不可欠です。グローバル:

import progressBar from 'xxx/progress-bar'

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

グローバルに登録したくない場合は、コンポーネント内で個別に使用することもできます。

実装プロセス

まず、フォルダーと 2 つのファイルを作成します。

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

まず、progress-bar.vue を開きます。構造を書きます。

<template>
      <p></p>
</template>

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

コンポーネントを登録するときに、

• などのいくつかの機能をカスタマイズしたいと思います。成功の色

• 失敗の色

• プログレスバーの位置

• アニメーションの移行時間

• 積載方向

• ##高さ

##自動的に完了できますか

もちろん、思いついたものを何でも追加できます。そうすれば、これらのカスタマイズ可能な属性は自然にコンポーネントの小道具になります:

#

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  // 进度条的高度
            }
          }
        }
      }
}

定義する属性に加えて、コンポーネント自体には、自身の状態を制御するための独自のプロパティが常に必要です。たとえば、このコンポーネントでは、進行状況バーの長さ、表示、非表示を制御する必要があります。

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 属性を追加して、アニメーションを自動的に完了できるかどうかを設定することです。もちろん、ルートまたはリクエストが常に保留状態にある場合は、これを行うことができます。アニメーションを完了しないアクションを永続的に設定します。

2 番目のステップは、start、finish、fail メソッドとアニメーション コードを含むオブジェクトを作成することです。

3 番目のステップは、このオブジェクトを 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
  }
}

ここでは、 progress バーコンポーネントが完成しました。自分で練習したり、プロジェクトを開始したり、vue-router の beforeResolve ステートメントのサイクル フックを使用したり、非同期をシミュレートするタイマーを作成してテストしたりすることができます。

以上がVueプログレスバーコンポーネントの実装チュートリアル（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。