如何渲染多个圆形进度条

如下右侧效果图

图片描述

部分代码如下:
HTML:

<template v-for=item in list>
  <div class="audioUpRight">
      <div class="circle-bar">
          <div class="circle-bar-left"></div>
          <div class="circle-bar-right"></div>
          <div class="mask">
              <span class="percent">{{item}}%</span>
          </div>
      </div>
 </div>
</template>

后台传来百分比数据:list:[10,50,80,70]

JS:

 //圆形进度条
CircleProgressBar() {
   var percent = parseInt($('.mask :first-child').text());
   var baseColor = $('.circle-bar').css('background-color');
   if (percent <= 50) {
      $('.circle-bar-right').css('transform', 'rotate(' + (percent * 3.6) + 'deg)');
   } else {
      $('.circle-bar-right').css({
         'transform': 'rotate(0deg)',
         'background-color': baseColor
      });
      $('.circle-bar-left').css('transform', 'rotate(' + ((percent - 50) * 3.6) + 'deg)');
   }
},

要如何根据不同数据实现不同圆形进度条?

以上代码取自链接描述

回复
阅读 2.2k
3 个回答

一个demo

<template v-for=item in list>
    <div class="audioUpRight">
        <div class="circle-bar">
            <div style="{{circleProgressBarLeft(item)}}"></div>
            <div style="{{circleProgressBarRight(item)}}"></div>
            <div class="mask">
                <span class="percent">{{item}}%</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
         /**
          * 省略
         */
        methods: {
            circleProgressBarRight(percent) {
                let style = ''
                let baseColor = this.baseColor // 你设置的baseColor
                if (percent <= 50) {
                    style = `transform:rotate(${percent * 3.6})deg);`
                } else {
                    style = `transform:rotate(0deg);background-color': ${baseColor};`
                }
                return style
            },

            circleProgressBarLeft(percent) {
                let style = ''
                if (percent > 50) {
                    style = `transform:rotate(${(percent - 50) * 3.6}deg);`
                }
                return style
            }
        }
    }
</script>

另外给题主两个建议,第一个是不要在template上循环,另一个是既然使用了vue,就应该理解数据驱动,而不是直接去操作dom。

不太懂你所谓的项目限制是什么,提出来作为模板v-for循环渲染的确是个好的方案,这时候建议:style动态设置样式

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏