mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(loading): fix loading transition invalid and directive loading not show in the second time when service loading show between them (#1281)

Browse Source 
* fix(loading): fix loading transition invalid

* fix(loading): fix directive loading not show in the second time

Fix directive loading not show in the second time when a service loading show between them
This commit is contained in:
Ryan2128 2021-01-14 23:56:59 -06:00 committed by GitHub
parent 931a679516
commit b5be4443e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/loading/__tests__/loading.spec.ts
View File

@ -42,7 +42,7 @@ describe('Loading', () => {
vm.loading = false
await sleep(100)
expect(vm.$el.querySelector('.el-loading-mask').style.display).toEqual('none')
expect(wrapper.find('.el-loading-mask').exists()).toBeFalsy()
})
test('unmounted directive', async () => {

14
packages/loading/src/createLoadingComponent.ts
View File

@ -1,4 +1,4 @@
import { createVNode, reactive, ref, toRefs, h, Transition, render, VNode } from 'vue'
import { createVNode, h, reactive, ref, render, toRefs, Transition, VNode, vShow, withCtx, withDirectives } from 'vue'
import { removeClass } from '@element-plus/utils/dom'
import type { ILoadingCreateComponentParams, ILoadingInstance } from './loading.type'
@ -18,7 +18,7 @@ export function createLoadingComponent({ options , globalLoadingOption }: ILoadi
data.text = text
}
function destorySelf() {
function destroySelf() {
const target = data.parent
if(!target.vLoadingAddClassList) {
removeClass(target, 'el-loading-parent--relative')
@ -41,7 +41,7 @@ export function createLoadingComponent({ options , globalLoadingOption }: ILoadi
afterLeaveTimer = window.setTimeout(() => {
if (afterLeaveFlag.value) {
afterLeaveFlag.value = false
destorySelf()
destroySelf()
}
}, 400)
data.visible = false
@ -50,7 +50,7 @@ export function createLoadingComponent({ options , globalLoadingOption }: ILoadi
function handleAfterLeave() {
if (!afterLeaveFlag.value) return
afterLeaveFlag.value = false
destorySelf()
destroySelf()
}
const componetSetupConfig = {
@ -80,11 +80,10 @@ export function createLoadingComponent({ options , globalLoadingOption }: ILoadi
return h(Transition, {
name: 'el-loading-fade',
onAfterLeave: this.handleAfterLeave,
},{
default: () => h('div', {
}, {
default: withCtx(() => [withDirectives(createVNode('div', {
style: {
backgroundColor: this.background || '',
display: this.visible ? null : 'none',
},
class: [
'el-loading-mask',
@ -99,6 +98,7 @@ export function createLoadingComponent({ options , globalLoadingOption }: ILoadi
this.text ? spinnerText : null,
]),
]),
[[vShow, this.visible]])]),
})
},
}

47
packages/loading/src/directive.ts
View File

@ -1,34 +1,37 @@
import Loading from './index'
const createInstance = (el, binding) => {
const textExr = el.getAttribute('element-loading-text')
const spinnerExr = el.getAttribute('element-loading-spinner')
const backgroundExr = el.getAttribute('element-loading-background')
const customClassExr = el.getAttribute('element-loading-custom-class')
const vm = binding.instance
el.instance = Loading({
text: vm && vm[textExr] || textExr,
spinner: vm && vm[spinnerExr] || spinnerExr,
background: vm && vm[backgroundExr] || backgroundExr,
customClass: vm && vm[customClassExr] || customClassExr,
fullscreen: !!binding.modifiers.fullscreen,
target: !!binding.modifiers.fullscreen ? null : el,
body: !!binding.modifiers.body,
visible: !!binding.value,
lock: !!binding.modifiers.lock,
})
}
const vLoading = {
mounted(el, binding) {
const textExr = el.getAttribute('element-loading-text')
const spinnerExr = el.getAttribute('element-loading-spinner')
const backgroundExr = el.getAttribute('element-loading-background')
const customClassExr = el.getAttribute('element-loading-custom-class')
const vm = binding.instance
const instance = Loading({
text: vm && vm[textExr] || textExr,
spinner: vm && vm[spinnerExr] || spinnerExr,
background: vm && vm[backgroundExr] || backgroundExr,
customClass: vm && vm[customClassExr] || customClassExr,
fullscreen: !!binding.modifiers.fullscreen,
target: !!binding.modifiers.fullscreen ? null : el,
body: !!binding.modifiers.body,
visible: !!binding.value,
lock: !!binding.modifiers.lock,
})
el.instance = instance
if(!!binding.value){
createInstance(el, binding)
}
},
updated(el, binding) {
const instance = el.instance
if(!instance) return
instance.setText(el.getAttribute('element-loading-text'))
if (binding.oldValue !== binding.value) {
if(binding.value && !instance.visible.value) {
instance.visible.value = true
if(binding.value) {
createInstance(el, binding)
} else {
instance.visible.value = false
instance.close()
}
}
},

4
packages/theme-chalk/src/loading.scss
View File

@ -69,8 +69,8 @@
}
}
.el-loading-fade-enter,
.el-loading-fade-leave-active {
.el-loading-fade-enter-from,
.el-loading-fade-leave-to {
opacity: 0;
}