使用vue2画一个环形进度条

可以使用第三方插件vue-progressbar来实现环形进度条。

首先，在终端中运行以下命令安装vue-progressbar：

npm install vue-progressbar --save

然后，在Vue组件中导入VueProgressBar并注册：

import VueProgressBar from 'vue-progressbar'

export default {
  components: {
    VueProgressBar
  },
  ...
}

接着，在Vue组件的template中使用vue-progressbar：

<vue-progressbar
  :progress="progress"
  :options="options"
  class="progress-bar"
></vue-progressbar>

在Vue组件的data选项中定义progress变量，用于控制进度条的进度：

data() {
  return {
    progress: 0,
    ...
  }
},

最后，在Vue组件的methods选项中定义一个方法，用于更新进度条的进度：

methods: {
  updateProgress() {
    setInterval(() => {
      if (this.progress < 100) {
        this.progress += 10
      } else {
        this.progress = 0
      }
    }, 1000)
  },
  ...
}

完整的代码如下：

<template>
  <div>
    <vue-progressbar
      :progress="progress"
      :options="options"
      class="progress-bar"
    ></vue-progressbar>
  </div>
</template>

<script>
import VueProgressBar from 'vue-progressbar'

export default {
  components: {
    VueProgressBar
  },
  data() {
    return {
      progress: 0,
      options: {
        color: '#e74c3c',
        thickness: '2px',
        transition: {
          speed: '0.2s',
          opacity: '0.6s',
          termination: 300
        },
        autoRevert: true,
        location: 'top',
        inverse: false
      }
    }
  },
  methods: {
    updateProgress() {
      setInterval(() => {
        if (this.progress < 100) {
          this.progress += 10
        } else {
          this.progress = 0
        }
      }, 1000)
    }
  },
  mounted() {
    this.updateProgress()
  }
}
</script>

<style>
.progress-bar {
  width: 100px;
  height: 100px;
  margin: 50px auto;
}
</style>

这样就可以实现一个简单的环形进度条了。