Vue-ProgressBar 轻量级进度条组件完整使用指南

2026-02-06 05:51:19作者：盛欣凯Ernestine

项目介绍

Vue-ProgressBar 是一个专为 Vue.js 框架设计的轻量级进度条组件。该组件提供了丰富的配置选项和灵活的使用方式，能够帮助开发者在 Vue.js 应用中轻松实现各种加载进度显示场景。

技术特性

支持 Vue.js 1.x 和 2.x 版本
提供多种进度条位置和样式配置
内置自动完成和自动恢复功能
与 vue-router 深度集成
支持临时和永久性样式修改

环境要求

在开始使用 Vue-ProgressBar 之前，请确保你的开发环境满足以下要求：

Vue.js 1.x 或 2.x 版本
Node.js 运行环境
npm 或 yarn 包管理器

安装步骤

使用 npm 安装

npm install vue-progressbar

使用 yarn 安装

yarn add vue-progressbar

基本配置

在主文件中配置

在项目的 main.js 文件中进行基本配置：

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import App from './App'

const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'left',
  inverse: false
}

Vue.use(VueProgressBar, options)

new Vue({
  ...App
}).$mount('#app')

配置选项说明

选项	描述	默认值	可选值
color	进度条颜色	'rgb(143, 255, 199)'	RGB、HEX、HSL、HSV、VEC
failedColor	加载失败时的颜色	'red'	RGB、HEX、HSL、HSV、VEC
thickness	进度条厚度	'2px'	px、em、pt、%、vh、vw
transition	过渡效果设置	{speed: '0.2s', opacity: '0.6s', termination: 300}	speed、opacity、termination
autoRevert	临时颜色变化是否自动恢复	true	true、false
location	进度条位置	'top'	left、right、top、bottom
inverse	是否反转进度条方向	false	true、false
autoFinish	接近100%时是否自动完成	true	true、false

组件使用

在应用根组件中使用

在 App.vue 文件中添加进度条组件：

<template>
  <div id="app">
    <router-view></router-view>
    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<script>
export default {
  mounted () {
    this.$Progress.finish()
  },
  created () {
    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  }
}
</script>

与 vue-router 集成

在路由配置中使用进度条元数据：

export default [
  {
    path: '/achievement',
    name: 'achievement',
    component: './components/Achievement.vue',
    meta: {
      progress: {
        func: [
          {call: 'color', modifier: 'temp', argument: '#ffb000'},
          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
          {call: 'location', modifier: 'temp', argument: 'top'},
          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
        ]
      }
    }
  }
]

vue-router 元数据选项

调用	修饰符	参数	示例
color	set、temp	string	{call: 'color', modifier: 'temp', argument: '#ffb000'}
fail	set、temp	string	{call: 'fail', modifier: 'temp', argument: '#ffb000'}
location	set、temp	string	{call: 'location', modifier: 'temp', argument: 'top'}
transition	set、temp	object	{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}

方法详解

Vue-ProgressBar 提供了丰富的方法来控制进度条的行为：

基础控制方法

// 开始进度条
this.$Progress.start()

// 完成进度条
this.$Progress.finish()

// 标记为失败
this.$Progress.fail()

// 按百分比增加进度
this.$Progress.increase(number)

// 按百分比减少进度  
this.$Progress.decrease(number)

// 设置具体进度值
this.$Progress.set(number)

样式控制方法

// 永久设置失败颜色
this.$Progress.setFailColor(color)

// 永久设置进度颜色
this.$Progress.setColor(color)

// 永久设置进度条位置
this.$Progress.setLocation(location)

// 临时设置失败颜色
this.$Progress.tempFailColor(color)

// 临时设置进度颜色
this.$Progress.tempColor(color)

// 临时设置进度条位置
this.$Progress.tempLocation(location)

恢复方法

// 恢复临时进度颜色
this.$Progress.revertColor()

// 恢复临时失败颜色
this.$Progress.revertFailColor()

// 恢复临时过渡效果
this.$Progress.revertTransition()

// 恢复所有临时设置
this.$Progress.revert()

实际应用示例

数据加载场景

使用 vue-resource 进行数据加载时的进度控制：

export default {
  methods: {
    test () {
      this.$Progress.start()
      this.$http.jsonp('http://api.example.com/data.json')
        .then((response) => {
          this.$Progress.finish()
        }, (response) => {
          this.$Progress.fail()
        })
    }
  }
}

外部访问进度条

通过 Vue 实例在外部访问进度条，例如在 axios 拦截器中使用：

import axios from 'axios'
import app from '../main'

const instance = axios.create({
  baseURL: '/api'
})

instance.interceptors.request.use(config => {
  app.$Progress.start()
  return config
})

instance.interceptors.response.use(response => {
  app.$Progress.finish()
  return response
})

export default instance

项目结构说明

Vue-ProgressBar 项目采用简洁的目录结构：

vue-progressbar/
├── src/
│   ├── index.js           # 主要逻辑文件
│   └── vue-progressbar.vue # Vue 组件文件
├── package.json            # 项目配置信息
├── rollup.config.js        # 构建配置文件
├── README.md               # 项目文档
└── LICENSE                 # 开源许可证