Nuxt/lib/app/components/Loading.vue

105 lines
2.1 KiB
Vue
Raw Normal View History

2016-11-07 01:34:58 +00:00
<template>
<div class="progress" :style="{
'width': percent+'%',
'height': height,
'background-color': canSuccess? color : failedColor,
'opacity': show ? 1 : 0
}"></div>
2016-11-07 01:34:58 +00:00
</template>
<script>
const Vue = require('vue')
2016-11-07 01:34:58 +00:00
export default {
data () {
return {
percent: 0,
show: false,
canSuccess: true,
2016-11-07 01:34:58 +00:00
duration: <%= loading.duration %>,
height: '<%= loading.height %>',
color: '<%= loading.color %>',
failedColor: '<%= loading.failedColor %>',
2016-11-07 01:34:58 +00:00
}
},
methods: {
start () {
this.show = true
this.canSuccess = true
if (this._timer) {
clearInterval(this._timer)
this.percent = 0
}
this._cut = 10000 / Math.floor(this.duration)
this._timer = setInterval(() => {
this.increase(this._cut * Math.random())
if (this.percent > 95) {
this.finish()
}
}, 100)
return this
},
set (num) {
this.show = true
this.canSuccess = true
this.percent = Math.floor(num)
return this
},
get () {
return Math.floor(this.percent)
},
increase (num) {
this.percent = this.percent + Math.floor(num)
return this
},
decrease () {
this.percent = this.percent - Math.floor(num)
return this
},
finish () {
this.percent = 100
this.hide()
return this
},
pause () {
clearInterval(this._timer)
return this
},
hide () {
clearInterval(this._timer)
this._timer = null
setTimeout(() => {
this.show = false
Vue.nextTick(() => {
setTimeout(() => {
this.percent = 0
}, 100)
})
}, 800)
return this
},
fail () {
this.canSuccess = false
this.percent = 100
this.hide()
return this
}
2016-11-07 01:34:58 +00:00
}
}
</script>
<style scoped>
.progress {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 2px;
width: 0%;
transition: width 0.2s, opacity 0.6s;
opacity: 1;
background-color: #efc14e;
z-index: 999999;
}
2016-11-07 01:34:58 +00:00
</style>