mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(loading-bar): glitch when triggers start, end, start.

Browse Source
This commit is contained in:
07akioni 2020-11-10 15:20:28 +08:00
parent 0b981f046f
commit 80584d8711
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/loading-bar/src/LoadingBar.vue
View File

@ -6,8 +6,13 @@
@after-enter="handleAfterEnter"
@after-leave="handleAfterLeave"
>
<!--
BUG: need to use v-show nor it will glitch when triggers start, end,
start. This could be a bug of vue but currently I have no time to verify
it.
-->
<div
v-if="loading || (!loading && entering)"
v-show="loading || (!loading && entering)"
class="n-loading-bar-container"
:class="{
[`n-${mergedTheme}-theme`]: mergedTheme
@ -72,15 +77,16 @@ export default {
},
finish () {
if (this.finishing || this.erroring) return
this.finishing = true
if (!this.loading) {
this.start(100, 100).then(() => {
this.finishing = true
const el = this.$refs.loadingBar
el.className = createClassName('finishing')
void el.offsetWidth
this.loading = false
})
} else {
this.finishing = true
const el = this.$refs.loadingBar
el.className = createClassName('finishing')
el.style.maxWidth = '100%'
@ -90,15 +96,16 @@ export default {
},
error () {
if (this.finishing || this.erroring) return
this.erroring = true
if (!this.loading) {
this.start(100, 100, 'error').then(() => {
this.erroring = true
const el = this.$refs.loadingBar
el.className = createClassName('error')
void el.offsetWidth
this.loading = false
})
} else {
this.erroring = true
const el = this.$refs.loadingBar
el.className = createClassName('error')
el.style.maxWidth = '100%'