携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

产品进行设计时，都很喜欢用一些很有创意的图片，然后再由我们前端实现，今天我们要实现的是前端圆环进度条，进度条大家很熟悉，在工作中经常实现，但是很多都是通过echast或者canvas以及js的去实现，还有的是通过css拼接两个半圆的方式去实现，前面三种方案太繁琐了，css网上实现的方案中间会出现一个缝隙，不够雅观，经过查看文档，发现了一个css一个背景属性conic-gradient十分适合用来实现这个,我们今天就Vue用来实现一个完美的圆环进度条吧

效果图

页面结构

其实这个结构看起来很简单，类名为progress_bar盒子控制整个样式的布局，就算出现挪动也不会出现样式错乱的情况，里面类名为progressBar盒子，主要是用于外圆环，外圆环里面的div盒子是内圆环，主要让结构看起来比较清晰，span标签包裹的是我们要显示的内容,其中还有俩个按钮，一个是用于增加进度，一个是用于减少进度，主要是为了方便我们看清楚圆环进度的变化，一般都是从后端获取到的数据

<div class="progress_bar">
      <div class="progressBar" :style="{background: progressBgStyle?'conic-gradient('+progressBgStyle+')':''}">
        <div>
          <span>{{progress}}%</span>
        </div>
      </div>
    </div>
     <button @click="progress++"> 增加进度</button>
    <button @click="progress--">减少进度</button>

定义数据

我们定义两个变量，一个变量是用于存储圆环百分比的样式，我们通过圆环百分比进度的变化，然后对其样式进行改变，存储到圆环百分比变量中，还有一个是存储的圆环百分比

data() {
    return {
      // 圆环百分比样式
      progressBgStyle: '',
      //   圆环百分比
      progress: 0,
    };
  },

定义方法

我们定义一个方法，利用数据侦听器对圆环百分比变量进行监听，如果圆环百分比变量发生变化，那么我们就可以调用这个方法进行改变圆环的样式，最后赋值给圆环百分比样式变量，让其页面进行渲染，其中还需要判断一下圆环百分比，确保圆环百分比没有超过一百或者没有小于零，否则就将样式置为100%进度或者将圆环百分比置为零

watch: {
     progress(){
       this.progressStyle()
     }
   },
  methods: {
    progressStyle() {
      // 小于0则退出
      if(this.progress< 0){
      this.progress=0;
       return;
      }
      //   小于100
      if (this.progress < 100) {
        this.progressBgStyle = `#397AFC 0%, #397AFC ${this.progress}%, #fff ${this.progress}%, #fff 100%`
      } else {
        // 等于或者大于100
        this.progressBgStyle = `#397AFC 0%, #397AFC 100%`
      }
    },
  },

代码我已经放到码上掘金上了，有兴趣的可以看一看！

码上掘金的Vue代码有些问题，放到本地跑是没有问题的，已亲测！

坚持努力，无惧未来！