vue实现环形百分比进度条组件

最新推荐文章于 2025-06-13 15:03:21 发布

caffreygo

最新推荐文章于 2025-06-13 15:03:21 发布

阅读量4.9k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42099419/article/details/101072401

本文介绍如何使用Vue实现一个环形百分比进度条组件，包括组件的调用示例和拓展属性的添加，同时提及了icon组件的封装情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考网上的一些环形百分比进度展示，加了一些拓展属性~

下面为两个调用的实例效果~

icon组件为另外封装的，可自行删除修改

组件调用

<radial-indicator 
    percentNum="87"
    speed="3"
    size="155"
    color="#8abf50"
    @animationFinished="animationFinished"
    backgroundColor="#c4dfa7"
    content="平均送达率"
    icon="mail"
/>

组件封装

<template>
  <div class="radial-indicator-container" :style="{'width':size+'px','height':size+'px'}">
    <div class="percentloop">
      <div class="circle-left" :style="{ backgroundColor: color}">
        <div :style="{ backgroundColor: backgroundColor}" ref="leftcontent"></div>
      </div>
      <div class="circle-right" :style="{ backgroundColor: color}">
        <div :styl