vue圆环百分比进度条组件功能的实现
作者:孩子他爹 时间:2024-06-07 15:19:57
有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激。
功能介绍:
1、若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画
2、若页面无刷新,且第一次传值大于第二次传值则为执行递减动画
3、中间展示的百分比数字有缓动动画(速度同圆环进度动画一直)
4、动画完成时会触发动画完成回调
5、外部传值为圆环进度百分比(整数),圆环动画速度(整数)
效果如图所示:
<template>
<div class="percentloop">
<div class="circle-left">
<div ref="leftcontent"></div>
</div>
<div class="circle-right">
<div ref="rightcontent"></div>
</div>
<div class="number">
{{ percent }} %
</div>
</div>
</template>
<script>
export default {
props: {
percentNum: {
type: [String, Number],
default: 0
},
speed: { // 建议取值为0-3
type: [String, Number],
default: 1
}
},
data () {
return {
percent: 0,
initDeg: 0,
timeId: null,
animationing: false
}
},
methods: {
transformToDeg (percent) {
let deg = 0
if (percent >= 100) {
deg = 360
} else {
deg = parseInt(360 * percent / 100)
}
return deg
},
transformToPercent (deg) {
let percent = 0
if (deg >= 360) {
percent = 100
} else {
percent = parseInt(100 * deg / 360)
}
return percent
},
rotateLeft (deg) { // 大于180时,执行的动画
this.$refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)'
},
rotateRight (deg) { // 小于180时,执行的动画
this.$refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)'
},
goRotate (deg) {
this.animationing = true
this.timeId = setInterval(() => {
if (deg > this.initDeg) { // 递增动画
this.initDeg += Number(this.speed)
if (this.initDeg >= 180) {
this.rotateLeft(this.initDeg)
this.rotateRight(180) // 为避免前后两次传入的百分比转换为度数后的值不为步距的整数,可能出现的左右转动不到位的情况。
} else {
this.rotateRight(this.initDeg)
}
} else { // 递减动画
this.initDeg -= Number(this.speed)
if (this.initDeg >= 180) {
this.rotateLeft(this.initDeg)
} else {
this.rotateLeft(180) // 为避免前后两次传入的百分比转换为度数后的值不为步距的整数,可能出现的左右转动不到位的情况。
this.rotateRight(this.initDeg)
}
}
this.percent = this.transformToPercent(this.initDeg) // 百分比数据滚动动画
const remainer = Number(deg) - this.initDeg
if (Math.abs(remainer) < this.speed) {
this.initDeg += remainer
if (this.initDeg > 180) {
this.rotateLeft(deg)
} else {
this.rotateRight(deg)
}
this.animationFinished()
}
}, 10)
},
animationFinished () {
this.percent = this.percentNum // 百分比数据滚动动画
this.animationing = false
clearInterval(this.timeId)
this.$emit('animationFinished') // 动画完成的回调
}
},
created () {
this.goRotate(this.transformToDeg(this.percentNum))
},
watch: {
'percentNum': function (val) {
if (this.animationing) return
this.goRotate(this.transformToDeg(val))
}
}
}
</script>
<style scoped lang="scss">
.percentloop {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
.circle-left, .circle-right {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: red;
overflow: hidden;
&>div {
width: 100%;
height: 100%;
background-color: #8a8a8a;
transform-origin: right center;
/*transition: all .5s linear;*/
}
}
.circle-right {
left: 50%;
&>div {
transform-origin: left center;
}
}
.number {
position: absolute;
top: 9%;
bottom: 9%;
left: 9%;
right: 9%;
background-color: #fff;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #000;
}
}
</style>
来源:https://www.cnblogs.com/qddyh/p/10386176.html
标签:vue,进度条,圆环百分比
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python算法练习之二分查找算法的实现
2023-08-27 14:29:29
![](https://img.aspxhome.com/file/2023/8/104388_0s.jpg)
另外一种斜体的导航条
2008-11-05 12:24:00
Python matplotlib 画图窗口显示到gui或者控制台的实例
2023-08-03 22:29:09
Python中几种属性访问的区别与用法详解
2022-12-24 23:36:20
numpy.random模块用法总结
2023-05-11 00:48:19
对python中Json与object转化的方法详解
2022-11-13 23:42:35
![](https://img.aspxhome.com/file/2023/0/99010_0s.jpg)
自动化测试Pytest单元测试框架的基本介绍
2023-08-20 04:51:47
![](https://img.aspxhome.com/file/2023/3/70733_0s.jpg)
详解Go语言Slice作为函数参数的使用
2023-07-16 11:30:20
Pytorch上下采样函数之F.interpolate数组采样操作详解
2022-01-19 08:13:51
![](https://img.aspxhome.com/file/2023/3/77913_0s.png)
使用mybatis框架连接mysql数据库的超详细步骤
2024-01-13 06:12:08
![](https://img.aspxhome.com/file/2023/3/116193_0s.jpg)
利用 Python 把小伙伴制作成表情包
2022-08-14 16:57:46
![](https://img.aspxhome.com/file/2023/5/134715_0s.jpg)
浅谈vue父子组件怎么传值
2024-05-09 15:16:15
分享10个免费超棒的编程用等宽字体
2023-12-06 11:28:32
![](https://img.aspxhome.com/file/2023/6/132506_0s.jpg)
深入解析JavaScript中的arguments对象
2024-05-09 14:50:44
JS使用ajax从xml文件动态获取数据显示的方法
2024-04-19 10:06:36
Python实现简单的文本相似度分析操作详解
2023-07-18 11:16:12
基于Django用户认证系统详解
2023-04-13 15:35:13
javascript中mouseenter与mouseover的异同
2024-05-02 16:11:54
![](https://img.aspxhome.com/file/2023/2/132872_0s.png)
WEB前端开发经验总结之实战篇
2008-06-12 12:49:00
![](https://img.aspxhome.com/file/UploadPic/20086/12/200861213042621s.gif)
python实现简易版学生成绩管理系统
2022-01-19 10:52:03
![](https://img.aspxhome.com/file/2023/1/81671_0s.jpg)