vue 进度条

在 Vue 中使用进度条可以使用第三方库，如 NProgress 或 vue-progressbar 等。以下是使用 vue-progressbar 的示例：

1. 安装 vue-progressbar：

npm install vue-progressbar --save

2. 在 main.js 文件中引入并注册：

import VueProgressBar from 'vue-progressbar'

Vue.use(VueProgressBar, {
  color: 'rgb(143, 255, 199)',
  failedColor: 'red',
  height: '2px'
})

3. 在组件中使用：

<template>
  <div>
    <button @click="startProgress">开始进度</button>
    <button @click="finishProgress">完成进度</button>
  </div>
</template>

<script>
export default {
  methods: {
    startProgress() {
      this.$Progress.start()
    },
    finishProgress() {
      this.$Progress.finish()
    }
  }
}
</script>

以上示例中，点击开始进度按钮会启动进度条，点击完成进度按钮会完成进度条。你可以根据实际需求进行更改。