Implementation tutorial of Vue progress bar component (code example)

The content of this article is about the implementation tutorial (code example) of the Vue progress bar component. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recently, in a personal project, I wanted to optimize the process of jumping between pages. I thought of the page jump progress bar used in many documents or npm, so I wanted to implement one myself. This is recorded.

Let’s take a look at the effect of npm searching for components:

so let’s implement it together.

Definition of usage

If you want to implement a component, you must think about your needs and define a comfortable usage method yourself. There is also a principle. For users, the simpler the usage, the better. The corresponding price is that the complexity of writing this component will become higher.

The way I want to use it is this: this method can be called anywhere and its status can be controlled at any time.

Look at the corresponding code:

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

Of course, if you want to use it anywhere, one step is indispensable, which is to register this component globally:

import progressBar from 'xxx/progress-bar'

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

If you don’t want to register it globally, you can also use it separately within a component, as long as you are happy.

Implementation process

First create a folder and two files:

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

Open progress-bar.vue, first To write the structure and style, it’s very simple here:

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

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

When registering the component, I want to customize some functions, such as

• Success color

• Failure color

• Progress bar position

• Animation Transition time

• Loading direction

• Height

• Can it be completed automatically

Of course, you can add whatever you think of, then these customizable attributes will naturally become the props of the component:

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

In addition to the attributes to be defined , then the component itself must always have some properties of its own to control its own state. For example, with this component, you need to control the length, display and hiding of the progress bar.

Add the data attribute of vue:

data () {
      return {
      percent: 0,  // 进度条长度
            show: false, // 显示和隐藏
            canSuccess: true  // 是否是成功的状态
      }
}

With these attributes, the progress bar will "move by itself" according to changes in these attributes. So the first thing that comes to mind at this time is of course Vue's computed properties:

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
  }
}

The vue component is actually completed here, and the next step is how to control it. Open index.js, and first write a standard component format:

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

export default {
  install (Vue, options = {}) {
  // 注册组件
    Vue.component(progressBar.name, progressBar)
  }
}

After that, we will use the extension method provided by Vue to complete our needs.

The first step is to add the autoFinish attribute to set whether the animation can be completed automatically. The default is true. Of course, if a route or request is always in the pending state, you can set it to last forever. Actions that don't complete the animation.

The second step is to write an object that contains start, finish, fail methods and animation code.

The third step is to hang this object on the prototype of Vue

The complete code and description are as follows:

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
  }
}

Here, a progress The bar component is complete. You can practice it yourself, start a project, use vue-router's beforeResolve statement cycle hook, or write a timer to simulate asynchronousness to test it.

The above is the detailed content of Implementation tutorial of Vue progress bar component (code example). For more information, please follow other related articles on the PHP Chinese website!