Nuxt/packages/vue-app/template/components/nuxt-loading.vue

178 lines
3.9 KiB
Vue
Raw Normal View History

2016-11-07 01:34:58 +00:00
<script>
export default {
name: 'NuxtLoading',
2019-09-10 09:51:14 +00:00
data () {
2016-11-07 01:34:58 +00:00
return {
percent: 0,
show: false,
canSucceed: true,
reversed: false,
skipTimerCount: 0,
rtl: <%= Boolean(loading.rtl) %>,
throttle: <%= typeof loading.throttle === 'number' ? loading.throttle : 200 %>,
duration: <%= typeof loading.duration === 'number' ? loading.duration : 3000 %>,
continuous: <%= Boolean(loading.continuous) %>
}
},
computed: {
2019-09-10 09:51:14 +00:00
left () {
if (!this.continuous && !this.rtl) {
return false
}
return this.rtl
? (this.reversed ? '0px' : 'auto')
: (!this.reversed ? '0px' : 'auto')
2016-11-07 01:34:58 +00:00
}
},
2019-09-10 09:51:14 +00:00
beforeDestroy () {
this.clear()
},
2016-11-07 01:34:58 +00:00
methods: {
2019-09-10 09:51:14 +00:00
clear () {
clearInterval(this._timer)
clearTimeout(this._throttle)
this._timer = null
},
2019-09-10 09:51:14 +00:00
start () {
this.clear()
this.percent = 0
this.reversed = false
this.skipTimerCount = 0
this.canSucceed = true
if (this.throttle) {
this._throttle = setTimeout(() => this.startTimer(), this.throttle)
} else {
this.startTimer()
}
return this
},
2019-09-10 09:51:14 +00:00
set (num) {
this.show = true
this.canSucceed = true
this.percent = Math.min(100, Math.max(0, Math.floor(num)))
return this
},
2019-09-10 09:51:14 +00:00
get () {
return this.percent
},
2019-09-10 09:51:14 +00:00
increase (num) {
this.percent = Math.min(100, Math.floor(this.percent + num))
return this
},
2019-09-10 09:51:14 +00:00
decrease (num) {
this.percent = Math.max(0, Math.floor(this.percent - num))
return this
},
2019-09-10 09:51:14 +00:00
pause () {
clearInterval(this._timer)
return this
},
2019-09-10 09:51:14 +00:00
resume () {
this.startTimer()
return this
},
2019-09-10 09:51:14 +00:00
finish () {
this.percent = this.reversed ? 0 : 100
this.hide()
return this
},
2019-09-10 09:51:14 +00:00
hide () {
this.clear()
setTimeout(() => {
this.show = false
this.$nextTick(() => {
this.percent = 0
this.reversed = false
})
}, 500)
return this
},
2019-09-10 09:51:14 +00:00
fail () {
this.canSucceed = false
return this
},
2019-09-10 09:51:14 +00:00
startTimer () {
if (!this.show) {
this.show = true
}
if (typeof this._cut === 'undefined') {
this._cut = 10000 / Math.floor(this.duration)
}
this._timer = setInterval(() => {
/**
* When reversing direction skip one timers
* so 0, 100 are displayed for two iterations
* also disable css width transitioning
* which otherwise interferes and shows
* a jojo effect
*/
if (this.skipTimerCount > 0) {
this.skipTimerCount--
return
}
if (this.reversed) {
this.decrease(this._cut)
} else {
this.increase(this._cut)
}
if (this.continuous) {
if (this.percent >= 100) {
this.skipTimerCount = 1
this.reversed = !this.reversed
} else if (this.percent <= 0) {
this.skipTimerCount = 1
this.reversed = !this.reversed
}
}
}, 100)
}
},
2019-09-10 09:51:14 +00:00
render (h) {
let el = h(false)
if (this.show) {
el = h('div', {
staticClass: 'nuxt-progress',
class: {
'nuxt-progress-notransition': this.skipTimerCount > 0,
'nuxt-progress-failed': !this.canSucceed
},
style: {
'width': this.percent + '%',
'left': this.left
}
})
}
return el
2016-11-07 01:34:58 +00:00
}
}
</script>
<% if (loading && loading.css) { %>
2017-08-27 17:52:27 +00:00
<style>
.nuxt-progress {
position: fixed;
top: 0px;
2017-08-29 11:58:45 +00:00
left: <%= loading.rtl === true ? 'auto' : '0px' %>;
right: 0px;
height: <%= loading.height %>;
width: 0%;
opacity: 1;
transition: width 0.1s, opacity 0.4s;
background-color: <%= loading.color %>;
z-index: 999999;
}
.nuxt-progress.nuxt-progress-notransition {
transition: none;
}
.nuxt-progress-failed {
background-color: <%= loading.failedColor %>;
}
</style><% } %>