145 lines
3.9 KiB
Vue
145 lines
3.9 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" ></el-progress>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { requestAnimationFrame, cancelRequestAnimFrame } from '@/jmap/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: true,
|
||
|
|
percentage: 0,
|
||
|
|
fps: 30,
|
||
|
|
then: null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.percentage = this.randomNum();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
randomNum() {
|
||
|
|
return Math.ceil(Math.random() * 5) + 50
|
||
|
|
},
|
||
|
|
run() {
|
||
|
|
let now = +Date.now();
|
||
|
|
let delta = now - this.then || +Date.now();
|
||
|
|
let interval = 1000 / this.fps;
|
||
|
|
|
||
|
|
if (delta > interval) {
|
||
|
|
this.then = now - (delta % interval);
|
||
|
|
if (this.percentage < 90) {
|
||
|
|
this.percentage = this.percentage + 5
|
||
|
|
} else {
|
||
|
|
cancelRequestAnimFrame(this.run);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
requestAnimationFrame(this.run);
|
||
|
|
},
|
||
|
|
start() {
|
||
|
|
if (!this.show) {
|
||
|
|
this.status = null;
|
||
|
|
this.percentage = this.randomNum();
|
||
|
|
this.show = true;
|
||
|
|
this.run();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
end(isSuccess) {
|
||
|
|
cancelRequestAnimFrame(this.run);
|
||
|
|
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 {
|
||
|
|
display: inline;
|
||
|
|
z-index: 9998;
|
||
|
|
position: absolute;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progressBar {
|
||
|
|
z-index: 9999;
|
||
|
|
display: inline;
|
||
|
|
position: absolute;
|
||
|
|
top: 40%;
|
||
|
|
width: 50%;
|
||
|
|
left: 25%;
|
||
|
|
}
|
||
|
|
</style>
|