vue+svg圆形进度条组件

vue+svg圆形进度条组件

  • 一、实现思路
  • 二、ProgressCircle.vue
  • 三、父组件使用
  • 四、实现效果

一、实现思路

使用svg的circle元素画两个圆形,一个圆形控制进度,一个绘制底色

二、ProgressCircle.vue

代码示例:

<template><!-- 圆形进度条控件 --><div :class="['progress-circle', `p-circle${randomNumber}`]"><svg :width="diameter" :height="diameter"><circleclass="progress-background":r="radius":cy="center":cx="center":stroke-width="strokeWidth":stroke="color.notOccupied"fill="none"/><circleclass="progress-line":r="radius":cy="center":cx="center":stroke-width="strokeWidth":stroke="color.occupy"stroke-linejoin="round"stroke-linecap="round"fill="none":stroke-dasharray="dashArray":stroke-dashoffset="dashOffset"/></svg><div class="progress-container"><slot></slot></div></div>
</template><script>
import { randomString } from '@/utils/index';
export default {props: {strokeWidth: { type: Number, default: 10, validator: value => value > 0 }, //线条宽度color: { type: Object, default: () => ({ occupy: '#1593ff', notOccupied: '#e0e0e0' }) }, //占比颜色percentage: { type: Number, required: true, validator: value => value >= 0 && value <= 100 }, //百分比1-100basisState: { type: String, default: 'width', validator: value => ['width', 'height'].includes(value) } // 默认以父元素宽度为直径长},data() {return {parentSize: 0,updateTimer: null,randomNumber: null};},computed: {// 直径长度diameter() {return this.parentSize >= this.strokeWidth ? this.parentSize : this.strokeWidth;},// 半径radius() {return (this.diameter - this.strokeWidth) / 2; // 减去 stroke-width 的一半,以确保圆环在 SVG 内部完全可见},// 圆心center() {return this.diameter / 2;},// 周长 2πrcircumference() {return 2 * Math.PI * this.radius;},// 虚线样式,间隔为一个周长dashArray() {return this.circumference;},// 虚线与路径起点之间的偏移量(周长的剩余占比)dashOffset() {return this.circumference - (this.circumference * this.percentage) / 100;}},created() {this.randomNumber = randomString(10); //生成随机字符串作为类名,确保多个组件存在时不会冲突},methods: {updateParentSize() {this.$nextTick(() => {this.updateTimer && clearTimeout(this.updateTimer);this.updateTimer = setTimeout(() => {const child = document.querySelector(`.p-circle${this.randomNumber}`);const parent = child.parentNode;this.parentSize = this.basisState == 'width' ? parent.offsetWidth : parent.offsetHeight; // 圆环大小以父元素宽度或高度作为直径}, 300);});}},mounted() {this.updateParentSize();window.addEventListener('resize', this.updateParentSize); // 监听窗口大小变化},beforeDestroy() {this.updateTimer && clearTimeout(this.updateTimer);window.removeEventListener('resize', this.updateParentSize);}
};
</script><style lang="scss" scoped>
.progress-circle {position: relative;.progress-container {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
}
.progress-background {transform: rotate(-90deg);// 默认情况下,SVG的圆弧是从3点钟方向(即右侧)开始绘制的// 通过旋转-90度,可以将起始位置调整到12点钟方向(即顶部)transform-origin: 50% 50%;
}
.progress-line {transform: rotate(-90deg);transform-origin: 50% 50%;
}
</style>

三、父组件使用

<template><div class="head-progress"><ProgressCircle :percentage="Number(extraParams.confirmRate || 0)"><div class="head_cont"><span class="he_text">开票进度</span><span class="he_prec">{{ extraParams.confirmRate || '0.00' }}%</span></div></ProgressCircle></div>
</template><script>
export default {components: {ProgressCircle: () => import('@/components/svgGraphic/progressCircle.vue')}
};
</script><style lang="scss" scoped>
.head-progress {width: 100px;height: 100px;margin-right: 30px;.head_cont {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;.he_text {font-size: 14px;color: #7180b0;}.he_prec {font-weight: 600;font-size: 16px;color: #0e1119;line-height: 28px;}}
}
</style>

四、实现效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react+hook+vite项目使用eletron打包成桌面应用+可以热更新

使用Hooks-Admin的架构 Hooks-Admin: &#x1f680;&#x1f680;&#x1f680; Hooks Admin&#xff0c;基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。https://gitee.com/HalseySpicy/Hooks-Adminexe桌面应用…

如何基于Tesseract实现图片的文本识别

在前一篇文章基础上&#xff0c;如何将报告图片中的文本解析出来&#xff0c;最近研究了基于Tesseract的OCR方案&#xff0c;Tesseract OCR是一个开源的OCR引擎&#xff0c;主要结合开源的tesseract和pytesseract&#xff0c;实现了jpg/png等格式图片文本识别&#xff0c;供大家…

Vue中template模板报错

直接<v出现如下模板&#xff0c;出现如下错误 注意两个地方&#xff1a; 1.template里面加一个div标签 2.要写name值 如下图

地质旅游平台推动“旅游+地质”融合发展

2024年元旦假期&#xff0c;哈尔滨文旅市场持续火爆。据哈尔滨市文化广电和旅游局大数据测算&#xff0c;截至1月1日&#xff0c;哈尔滨市累计接待游客304.79万人次&#xff0c;实现旅游总收入59.14亿元&#xff0c;游客接待量与旅游总收入达到历史峰值。 夏有进“淄”赶烤&…

Linux源码阅读笔记-V4L2框架基础介绍

V4L2视频设备驱动基础 V4L2 是专门为 Linux 设备设计的整套视频框架&#xff08;其主要核心在 Linux 内核&#xff0c;相当于 Linux 操作系统上层的视频源捕获驱动框架&#xff09;。为上层访问系统底层的视频设备提供一个统一的标准接口。V4L2 驱动框架能够支持多种类型设备&…

机器学习day2-特征工程

四.特征工程 1.概念 一般使用pandas来进行数据清洗和数据处理、使用sklearn来进行特征工程 将任意数据&#xff08;文本或图像等&#xff09;转换为数字特征&#xff0c;对特征进行相关的处理 步骤&#xff1a;1.特征提取&#xff1b;2.无量纲化&#xff08;预处理&#xf…

机器学习 - 为 Jupyter Notebook 安装新的 Kernel

https://ipython.readthedocs.io/en/latest/install/kernel_install.html 当使用jupyter-notebook --no-browser 启动一个 notebook 时&#xff0c;默认使用了该 jupyter module 所在的 Python 环境作为 kernel&#xff0c;比如 C:\devel\Python\Python311。 如果&#xff0c…

w038基于SpringBoot的网上租赁系统设计与实现

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0…

【AI图像生成网站Golang】JWT认证与令牌桶算法

AI图像生成网站 目录 一、项目介绍 二、雪花算法 三、JWT认证与令牌桶算法 四、项目架构 五、图床上传与图像生成API搭建 六、项目测试与调试(等待更新) 三、JWT认证与令牌桶算法 在现代后端开发中&#xff0c;用户认证和接口限流是确保系统安全性和性能的两大关键要素…

【PS】蒙版与通道

内容1&#xff1a; 、选择蓝色通道并复制&#xff0c;对复制的蓝色通道ctrli进行反向选择&#xff0c;然后ctrll调整色阶。 、选择载入选区&#xff0c;然后点击rgb。 、点击蒙版 、点击云彩图层调整位置 、点击色相/饱和度&#xff0c;适当调整 、最后使用滤镜等功能添加光圈…

树莓派4B Qt+FFMPEG 多线程录制USB相机mjpeg数据流“h264_omx“硬件编码的MP4文件

文章目录 1 前言2 一些问题说明2.0 树莓派4b系统版本2.1 Qt2.2 FFMPEG2.3 图像格式 3 核心代码3.0 代码逻辑3.1 pro文件3.2 avframequeue.cpp3.3 decodethread.cpp 4 资源下载 1 前言 本项目为在树莓派4B开发板上&#xff0c;通过QtFFMPEG以多线程分别解码、编码USB摄像头视频数…

i春秋-Hash(__wakeup沉默、序列化)

练习平台地址 竞赛中心 题目描述 题目内容 啥也没有就一个标签跳转 点击后的确发生了跳转 观察到url中有key和hash两个值&#xff0c;猜测hash是key的hash 查看源代码发现确实是 $hashmd5($sign.$key);the length of $sign is 8 解密得到$sign应该为kkkkkk01 构造122的hash i…

【C语言指南】C语言内存管理 深度解析

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C语言指南》 期待您的关注 引言 C语言是一种强大而灵活的编程语言&#xff0c;为程序员提供了对内存的直接控制能力。这种对内存…

解决vue3+ts打包项目时会生成map文件

在正常未配置的情况下使用npm run build 命令打包&#xff0c;会生成很多的js和map文件,map文件是为了方便我们在生产环境进行更友好的代码调试&#xff0c;但是这样就存一个安全问题&#xff1b;容易被攻击&#xff1b; 解决方法&#xff1a;在package.json文件&#xff0c;重…

MySQL:表设计

表的设计 从需求中获得类&#xff0c;类对应到数据库中的实体&#xff0c;实体在数据库中表现为一张一张的表&#xff0c;类中的属性就对应着表中的字段&#xff08;也就是表中的列&#xff09; 表设计的三大范式&#xff1a; 在数据库设计中&#xff0c;三大范式&#xff0…

使用 Azure OpenAI 服务对数据进行联合 SharePoint 搜索

作者&#xff1a;来自 Elastic Gustavo Llermaly 使用 Azure OpenAI 服务处理你的数据&#xff0c;并使用 Elastic 作为向量数据库。 在本文中&#xff0c;我们将探索 Azure OpenAI 服务 “On Your Data”&#xff0c;使用 Elasticsearch 作为数据源。我们将使用 Elastic Shar…

chat2db调用ollama实现数据库的操作。

只试了mysql的调用。 其它的我也不用&#xff0c;本来想充钱算了。最后一看单位是美刀。就放弃了这分心。于是折腾了一下。 本地运行chat2db 及chat2db ui https://gitee.com/ooooinfo/Chat2DB clone 后运行起来 chat2db的java端&#xff0c;我现在搞不清这一个项目是有没有…

【搜狐简单AI-注册/登录安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被机器执行自动化程序攻击&#xff0c;存在如下风险&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露&#xff0c;不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 &#xff0c;造成用户无法登陆、注册&#xff0c;大量收到垃圾短信的…

微服务day09

DSL查询 快速入门 GET /items/_search {"query": {"match_all": {}} } 叶子查询 GET /items/_search {"query": {"match_all": {}} }GET /items/_search {"query": {"multi_match": {"query": "脱…

Linux驱动开发第2步_“物理内存”和“虚拟内存”的映射

“新字符设备的GPIO驱动”和“设备树下的GPIO驱动”都要用到寄存器地址&#xff0c;使用“物理内存”和“虚拟内存”映射时&#xff0c;非常不方便&#xff0c;而pinctrl和gpio子系统的GPIO驱动&#xff0c;非常简化。因此&#xff0c;要重点学习pinctrl和gpio子系统下的GPIO驱…