
html
<template>
<div :class="$options.name">
<el-button type="primary" @click="fakeLoading">开始加载</el-button>
<el-progress
style="width: 100%; height: 30px"
v-if="percentage"
type="line"
:percentage="percentage"
:show-text="true"
:stroke-width="5"
:text-inside="false"
:color="'#409EFF'"
:define-back-color="'#eee'"
/>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
interval: null,
percentage: 0,
};
},
created() {},
mounted() {},
beforeDestroy() {
clearInterval(this.interval);
},
methods: {
fakeLoading({ cb } = {}) {
this.closeFakeLoading();
this.interval = setInterval(() => {
if (this.percentage >= 99) {
clearInterval(this.interval);
cb && cb();
} else this.percentage += 1;
}, 100);
},
closeFakeLoading(d) {
clearInterval(this.interval);
this.percentage = 0;
},
},
};
</script>
模仿滴滴单车解锁的时候,从0%到90%的欺骗加载动画效果
https://blog.csdn.net/qq_37860634/article/details/100147738