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.rhkb.cn/news/473126.html

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

相关文章

软件测试 —— 自动化基础

目录 前言 一、Web 自动化测试 1.什么是 Web 自动化测试 2.驱动 3.安装驱动管理 二、Selenium 1.简单 web 自动化测试示例 2.工作原理 三、元素定位 1.cssSelector 2.XPath 四、操作测试对象 1.点击/提交对象 2.模拟按键输入 3.清除文本内容 4.获取文本信息 5.…

基于SpringBoot的旅游网站(程序+数据库+报告)

基于SpringBoot的旅游网站&#xff0c;系统包含两种角色&#xff1a;管理员、用户,系统分为前台和后台两大模块&#xff0c;主要功能如下。 【前台】&#xff1a; - 首页&#xff1a;展示旅游网站的核心内容&#xff0c;包括推荐的旅游线路、最新的旅游资讯等。 - 旅游线路&am…

RabbitMQ教程:路由(Routing)(四)

文章目录 RabbitMQ教程&#xff1a;路由&#xff08;Routing&#xff09;&#xff08;四&#xff09;一、引言二、基本概念2.1 路由与绑定2.2 Direct交换机2.3 多绑定2.4 发送日志2.5 订阅 三、整合代码3.1 EmitLogDirectApp.cs3.2 ReceiveLogsDirectApp.cs3.3 推送所有和接收e…

AntFlow:一款高效灵活的开源工作流引擎

AntFlow 是一款功能强大、设计优雅的开源工作流引擎&#xff0c;其灵感来源于钉钉的工作流设计理念&#xff0c;旨在为企业和开发者提供灵活、高效的工作流解决方案。AntFlow 支持复杂的业务流程管理&#xff0c;具有高度可定制性&#xff0c;且拥有现代化的前端设计&#xff0…

游戏引擎学习第13天

视频参考:https://www.bilibili.com/video/BV1QQUaYMEEz/ 改代码的地方尽量一张图说清楚吧,懒得浪费时间 game.h #pragma once #include <cmath> #include <cstdint> #include <malloc.h>#define internal static // 用于定义内翻译单元内部函数 #…

中仕公考怎么样?事业编面试不去有影响吗?

事业编考试笔试已经通过&#xff0c;但是面试不去参加会有影响吗&#xff1f; 1. 自动放弃面试资格&#xff1a;未能按时出席事业单位的面试将被视为主动放弃该岗位的竞争机会。 2. 个人信誉问题&#xff1a;面试作为招聘流程的关键步骤&#xff0c;无故缺席可能被解释为诚信…

ElasticSearch学习笔记二:使用Java客户端

一、前言 在上一篇文章中&#xff0c;我们对ES有了最基本的认识&#xff0c;本着实用为主的原则&#xff0c;我们先不学很深的东西&#xff0c;今天打算先学习一下ES的Java客户端如何使用。 二、创建项目 1、普通Maven项目 1、创建一个Maven项目 2、Pom文件 <dependenc…

使用 Grafana api 查询 Datasource 数据

一、使用grafana 的api 接口 官方API 二、生成Api key 点击 Administration -》Users and accss -》Service accounts 进入页面 点击Add service account 创建 service account 点击Add service account token 点击 Generate token , 就可以生成 api key 了 三、进入grafana…

机器学习-36-对ML的思考之机器学习研究的初衷及科学研究的期望

文章目录 1 机器学习最初的样子1.1 知识工程诞生(专家系统)1.2 知识工程高潮期1.3 专家系统的瓶颈(知识获取)1.4 机器学习研究的初衷2 科学研究对机器学习的期望2.1 面向科学研究的机器学习轮廓2.2 机器学习及其应用研讨会2.3 智能信息处理系列研讨会2.4 机器学习对科学研究的重…

深入List集合:ArrayList与LinkedList的底层逻辑与区别

目录 一、前言 二、基本概念 三、相同之处 四、不同之处 五、ArrayList 底层 六、LinkedList 底层 七、ArrayList 应用场景 八、LinkedList 应用场景 九、ArrayList和LinkedList高级话题 十、总结 一、前言 在Java集合的广阔舞台上&#xff0c;ArrayList与LinkedLis…

python实现十进制转换二进制,tkinter界面

目录 需求 效果 代码实现 代码解释 需求 python实现十进制转换二进制 效果 代码实现 import tkinter as tk from tkinter import messageboxdef convert_to_binary():try:# 获取输入框中的十进制数decimal_number int(entry.get())# 转换为二进制binary_number bin(de…

关于强化学习的一份介绍

在这篇文章中&#xff0c;我将介绍与强化学习有关的一些东西&#xff0c;具体包括相关概念、k-摇臂机、强化学习的种类等。 一、基本概念 所谓强化学习就是去学习&#xff1a;做什么才能使得数值化的收益信号最大化。学习者不会被告知应该采取什么动作&#xff0c;而是必须通…

js导入导出

前言: 后面将学习: Vue3ElementPlus 前置知识:前端三件套 HTML,CSS,JS 使用Vscode 本篇学习 这里先补充一个JavaScript的模块化的知识点 - 导入导出 JS提供的导入导出机制,可以实现按需导入. 我们之前是这样导入的 showMessage.js //简单的展示信息 function simpleMessage…

Web导出Excel表格

背景&#xff1a; 1. 后端主导实现 流程&#xff1a;前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载 场景&#xff1a;大部分场景都有后端来做 2. 前端主导实现 流程&#xff1a;前端获取要导出的数据 -> 常规数据用插件处理成一个e…

【Linux】Ubuntu中muduo库的编译环境安装

Muduo is a multithreaded C network library based on the reactor pattern. muduo库的介绍就是&#xff1a;一个基于reactor反应堆模型的多线程C网络库。 muduo网络库是C语言开发的一个非常优秀的网络库&#xff0c;作者陈硕&#xff0c;muduo网络库在多线程环境下性能非常高…

IDEA leetcode插件代码模板配置,登录闪退解决

前言 最近换电脑&#xff0c;配置idea时和原来的模板格式不一样有点难受&#xff0c;记录一下自己用的模板&#xff0c;后期换电脑使用&#xff0c;大家也可以使用&#xff0c;有更好的地方可以分享给我~ IDEA leetcode插件代码模板配置,登录闪退解决 前言1 下载IDEA leetcode…

网络安全SQL初步注入2

六.报错注入 mysql函数 updatexml(1,xpath语法,0) xpath语法常用concat拼接 例如: concat(07e,(查询语句),07e) select table_name from information_schema.tables limit 0,1 七.宽字节注入(如果后台数据库的编码为GBK) url编码:为了防止提交的数据和url中的一些有特殊意…

【GeekBand】C++设计模式笔记11_Builder_构建器

1. “对象创建” 模式 通过 “对象创建” 模式绕开new&#xff0c;来避免对象创建&#xff08;new&#xff09;过程中所导致的紧耦合&#xff08;依赖具体类&#xff09;&#xff0c;从而支持对象创建的稳定。它是接口抽象之后的第一步工作。典型模式 Factory MethodAbstract …

JS学习日记(jQuery库)

前言 今天先更新jQuery库的介绍&#xff0c;它是一个用来帮助快速开发的工具 介绍 jQuery是一个快速&#xff0c;小型且功能丰富的JavaScript库&#xff0c;jQuery设计宗旨是“write less&#xff0c;do more”&#xff0c;即倡导写更少的代码&#xff0c;做更多的事&#xf…

排序算法(基础)大全

一、排序算法的作用&#xff1a; 排序算法的主要作用是将一组数据按照特定的顺序进行排列&#xff0c;使得数据更加有序和有组织。 1. 查找效率&#xff1a;通过将数据进行排序&#xff0c;可以提高查找算法的效率。在有序的数据中&#xff0c;可以使用更加高效的查找算法&…