<template>
<div>
<a-progress :percent="format" status="active" />
</div>
</template>
<script>
export default {
computed: {
woStr: (that) => JSON.stringify,
format: (that) => parseInt(that.percent),
},
// pending //reject //resolve
props: ["state", "interval"],
data() {
return {
percent: 0,
timer: null,
};
},
methods: {
restartFlow() {
this.percent = 0;
let timmeLine = 0;
this.timer && clearInterval(this.timer);
const p = Math.random() / 10;
this.timer = setInterval(() => {
timmeLine++;
this.percent = (-1 / (p * timmeLine + 1) + 1) * 100;
}, this.interval || 200);
},
rejectFlow() {
this.percent = 100;
this.timer && clearInterval(this.timer);
},
resolveFlow() {
this.percent = 100;
this.timer && clearInterval(this.timer);
},
},
watch: {
state: {
handler(state) {
switch (state) {
case "pending":
this.restartFlow();
break;
case "reject":
this.rejectFlow();
break;
case "resolve":
this.resolveFlow();
break;
default:
throw new Error(
'state must be one of "pending" "reject" "resolve"'
);
}
},
immediate: true,
},
},
};
</script>
<style lang="less" scoped>
/deep/ .ant-progress-bg {
transition: width 1000ms;
}
</style>
假的进度条
最新推荐文章于 2023-10-26 13:47:20 发布