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>
이상 은 vue 링 백분율 진도 항목 구성 요소 기능 의 실현 에 대한 상세 한 내용 입 니 다.vue 진도 항목 에 관 한 자 료 는 우리 의 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.