vue3圆环进度条组件

一、功能描述

主要用于展示数值,和根据百分比展示圆环

二、代码(圆环进度条组件)

html 复制代码
<template>
  <div class="progress" :style="{ width, height }">
    <svg
      viewBox="0 0 96 96"
      class="svg-circle-progress"
      style="width: 100%; height: 100%"
    >
      <circle
        r="40"
        cx="48"
        cy="48"
        fill="none"
        stroke-miterlimit="20"
        stroke-width="10"
        class="svg-progress"
        :style="`stroke-dasharray: 275, 279.602; stroke: ${bgCol}`"
      ></circle>
      <circle
        r="40"
        cx="48"
        cy="48"
        fill="none"
        stroke-miterlimit="20"
        stroke-width="10"
        class="svg-progress"
        :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"
      ></circle>
    </svg>
    <div class="mask">
      <!-- showProgress -->
      <span class="bigData"> {{ showtext }} </span>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  // 百分比
  targetValue: {
    type: Number,
    require: true,
    default: -1,
  },
  // 默认轨道背景颜色
  bgCol: {
    type: String,
    default: "#eee",
  },
  // 数值轨道颜色
  color: {
    type: String,
    default: "#4c7cee",
  },
  // 展示数值
  showtext: {
    type: Number,
    default: 0,
    require: true,
  },
  // 宽度
  width: {
    type: String,
    default: "210px",
  },
  // 高度
  height: {
    type: String,
    default: "100px",
  },
});
const { height, width, color, targetValue, bgCol, showtext } = toRefs(props);

const showProgress = ref(0);
const addData = () => {
  if (targetValue.value === 0) return;
  let timer = setInterval(() => {
    if (targetValue.value === showProgress.value) {
      clearInterval(timer), timer == null;
      return;
    }
    ++showProgress.value;
  }, 15);
};
onMounted(() => {
  addData();
});

const progressValue = ref((showProgress.value / 100) * 250);

watch(showProgress, (newValue) => {
  progressValue.value = (newValue / 100) * 250;
});
</script>
<style scoped>
@font-face {
  font-family: 'LCD';
  src: url('/src/assets/static/font/LiquidCrystal-Normal.otf');
}
.progress {
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
}
.svg-circle-progress {
  position: relative;
  transform: rotate(-90deg);
}
.svg-progress {
  stroke: #2196f3;
  stroke-linecap: round;
  transition: all 0.3s linear;
}
.mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bigData {
  font-family: 'LCD';
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
</style>

三、使用

html 复制代码
<Cirque
  :target-value="item.progress"
  :bgCol="item.bgCol"
  :color="item.Col"
  :showtext="item.value"
  width="50px"
  height="50px"
  />

四、本项目使用效果

相关推荐
2501_9159184114 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体