因为所在公司临近年底突然宣布Game Over，导致我等小码农又要踏上一个艰辛的求职道路了。才眨眼功夫，年就过完了，快乐的时光总是很匆忙呀。
开年的第一个面试，面试官问我会不会自己写一个圆环进图圈，这个我之前做过，紧张还是怎么的，一时忘记当初怎么写的了还有点小尴尬呢。回到家自己又实现了一遍，现在把代码贴出来，有需要的人可以参考一下，如果试用过，发现问题，欢迎留言告知，不胜感激。
<template><div>
<div>
<div ref="leftcontent"></div>
</div>
<div>
<div ref="rightcontent"></div>
</div>
<div>{{ percent }} %</div>
</div>
</template>
<script>
export default {
props: {
percentNum: {
type: [String, Number],
default: 0
}
},
data () {
return {
percent: this.percentNum,
initDeg: 0
}
},
methods: {
goRotate (deg) {
let timeId = setInterval(() => {
if (Number(deg) === Number(this.initDeg)) {
clearInterval(timeId)
} else if (deg > this.initDeg) {
this.initDeg += 1
if (this.initDeg > 180) {
this.$refs.rightcontent.style.transform = 'rotate(' + (this.initDeg - 180) + 'deg)'
} else {
this.$refs.leftcontent.style.transform = 'rotate(' + this.initDeg + 'deg)'
}
} else {
this.initDeg -= 1
if (this.initDeg >= 180) {
this.$refs.rightcontent.style.transform = 'rotate(' + (this.initDeg - 180) + 'deg)'
} else {
this.$refs.leftcontent.style.transform = 'rotate(' + this.initDeg + 'deg)'
}
}
}, 0)
}
},
computed: {
getDeg () {
let deg = 0
if (this.percent >= 100) {
deg = 360
} else {
deg = parseInt(360 * this.percent / 100)
}
return deg
}
},
mounted () {
this.goRotate(this.getDeg)
},
watch: {
'percentNum': function (val) {
this.percent = val
this.goRotate(this.getDeg)
}
}
}
</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>