vue圆环百分比进度条组件功能的实现
作者:孩子他爹 发布时间:2024-06-07 15:19:57
标签:vue,进度条,圆环百分比
有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激。
功能介绍:
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
0
投稿
猜你喜欢
- 尼姆游戏是个著名的游戏,有很多变种玩法。两个玩家轮流从一堆物品中拿走一部分。在每一步中,玩家可以自由选择拿走多少物品,但是必须至少拿走一个并
- 本文较为详细的分析了php单一入口应用程序。分享给大家供大家参考。具体如下:什么是单一入口应用程序?在解释什么是单一入口应用程序之前,我们先
- 首先我的环境已配置好:GO的目录结构是:add.gopackage calc//函数名必须大写首字母,不然外部包找不到func Add(a
- pytorch自定义不可导激活函数今天自定义不可导函数的时候遇到了一个大坑。首先我需要自定义一个函数:sign_fimport torchf
- 前言删除表,大家下意识想到的命令可能是直接使用DROP TABLE "表名",这是初生牛犊的做法,因为当要删除的表达空间
- 列表推导与生成器表达式当我们创建了一个列表的时候,就创建了一个可以迭代的对象:>>> squares=[n*n for n
- 后台管理配置动态路由菜单前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写
- 本文主要是写了一个将指定文件夹下的指定文件类型移动到指定位置,具体内容如下# coding:utf-8import osimport shu
- 代码如下:'===================================== '获得文件后缀 '=====
- 如何向前端推送用户请求的信息?postinfo.htm<head><title>asp教程之回应用户请求信息&nbs
- 1.INSERT (往数据表里插入记录的语句) INSERT INTO 表名(字段名1, 字段名2, ……) VALUES ( 值1, 值2
- 网上有这样一道题目:一个字符串String=“adadfdfseffserfefsefseetsdg”,找出里面出现次数最多的字母和出现的次
- 本文总结下如何在编写python代码时对异步操作进行同步化模拟,从而提高代码的可读性和可扩展性。 &nbs
- 我就废话不多说了,大家还是直接看代码吧!talk is cheap from openpyxl import Workbook
- 序列化是将对象的状态信息转换为可以存储或传输的形式的过程。在序列化期间,对象将其当前状态(存在内存中)写入到临时或持久性存储区(硬盘)。以后
- 本文实例讲述了php实现的日历程序。分享给大家供大家参考。具体如下:<?php /* * php 输出日历程序 */ header(&
- 准备工作首先,我们需要确保以下几点:你已经安装了MySQL数据库,并且可以正常连接。你已经配置好了MyBatis的环境,并且可以成功执行单条
- 前言上回在 用 Go 写一个轻量级的 ssh 批量操作工具 里提及过,我们做 Golang 并发的时候要对并发进行限制,对 goroutin
- 在更改列顺序之前,你需要考虑是否的确需要更改表中的列顺序。SQL的核心要点是从数据存储格式获取应用。总应指定检索数据的顺序。在下面的第1条语
- 前言我们今天的任务很明确,我先系统梳理一下:1.先用Python爬取一波漂亮的美女照片;2.然后Python中炫酷的代码实现;3.最后用ma