143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<template>
|
|
<div v-show="show" class="progressShade" :style="{background: background}">
|
|
<el-progress
|
|
class="progressBar"
|
|
:type="type"
|
|
:show-text="showText"
|
|
:text-inside="textInside"
|
|
:stroke-width="strokeWidth"
|
|
:percentage="percentage"
|
|
:color="color"
|
|
:status="status"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { requestAnimationFrame, cancelRequestAnimFrame } from '@/utils/animation';
|
|
|
|
export default {
|
|
name: 'ProgressBar',
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default() {
|
|
return 'line';
|
|
}
|
|
},
|
|
showText: {
|
|
type: Boolean,
|
|
default() {
|
|
return true;
|
|
}
|
|
},
|
|
textInside: {
|
|
type: Boolean,
|
|
default() {
|
|
return false;
|
|
}
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default() {
|
|
return 5;
|
|
}
|
|
},
|
|
background: {
|
|
type: String,
|
|
default() {
|
|
return 'rgba(0, 0, 0, 0.8)';
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
color: '#8e71c7',
|
|
status: null,
|
|
show: false,
|
|
percentage: 0,
|
|
fps: 30,
|
|
then: null,
|
|
timer: null
|
|
};
|
|
},
|
|
mounted() {
|
|
this.percentage = this.randomNum();
|
|
this.start();
|
|
},
|
|
methods: {
|
|
randomNum() {
|
|
return Math.ceil(Math.random() * 5) + 20;
|
|
},
|
|
run() {
|
|
this.timer = setInterval(() => {
|
|
this.percentage = this.percentage + 3;
|
|
// 加载到百分百完成
|
|
if (this.percentage >= 95) {
|
|
this.percentage = 95;
|
|
// 关闭定时器
|
|
clearInterval(this.timer);
|
|
return;
|
|
}
|
|
}, 50);
|
|
},
|
|
start() {
|
|
if (!this.show) {
|
|
this.status = null;
|
|
this.percentage = this.randomNum();
|
|
this.show = true;
|
|
this.run();
|
|
}
|
|
},
|
|
end(isSuccess) {
|
|
this.timer && clearInterval(this.timer);
|
|
if (this.show) {
|
|
if (isSuccess) {
|
|
this.success();
|
|
} else {
|
|
this.failed();
|
|
}
|
|
}
|
|
},
|
|
progressAt(num) {
|
|
if (num > 0 && num < 100 && num > this.percentage) {
|
|
this.percentage = num;
|
|
}
|
|
},
|
|
success() {
|
|
this.status = 'success';
|
|
this.percentage = 100;
|
|
setTimeout(() => {
|
|
this.show = false;
|
|
}, 1000 / this.fps);
|
|
},
|
|
failed() {
|
|
this.status = 'exception';
|
|
setTimeout(() => {
|
|
this.show = false;
|
|
}, 1000 / this.fps);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
|
|
.progressShade {
|
|
z-index: 9998;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.progressBar {
|
|
z-index: 9999;
|
|
position: absolute;
|
|
top: 40%;
|
|
width: 50%;
|
|
left: 25%;
|
|
}
|
|
</style>
|