You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.6 KiB
61 lines
1.6 KiB
3 years ago
|
/* @flow */
|
||
|
|
|
||
|
|
import { enter, leave } from '../modules/transition'
|
||
|
|
|
||
|
|
// recursively search for possible transition defined inside the component root
|
||
|
|
function locateNode (vnode: VNode): VNodeWithData {
|
||
|
|
return vnode.componentInstance && (!vnode.data || !vnode.data.transition)
|
||
|
|
? locateNode(vnode.componentInstance._vnode)
|
||
|
|
: vnode
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
|
||
|
|
vnode = locateNode(vnode)
|
||
|
|
const transition = vnode.data && vnode.data.transition
|
||
|
|
const originalDisplay = el.__vOriginalDisplay =
|
||
|
|
el.style.display === 'none' ? '' : el.style.display
|
||
|
|
if (value && transition) {
|
||
|
|
vnode.data.show = true
|
||
|
|
enter(vnode, () => {
|
||
|
|
el.style.display = originalDisplay
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
el.style.display = value ? originalDisplay : 'none'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
update (el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
|
||
|
|
/* istanbul ignore if */
|
||
|
|
if (!value === !oldValue) return
|
||
|
|
vnode = locateNode(vnode)
|
||
|
|
const transition = vnode.data && vnode.data.transition
|
||
|
|
if (transition) {
|
||
|
|
vnode.data.show = true
|
||
|
|
if (value) {
|
||
|
|
enter(vnode, () => {
|
||
|
|
el.style.display = el.__vOriginalDisplay
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
leave(vnode, () => {
|
||
|
|
el.style.display = 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
el.style.display = value ? el.__vOriginalDisplay : 'none'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
unbind (
|
||
|
|
el: any,
|
||
|
|
binding: VNodeDirective,
|
||
|
|
vnode: VNodeWithData,
|
||
|
|
oldVnode: VNodeWithData,
|
||
|
|
isDestroy: boolean
|
||
|
|
) {
|
||
|
|
if (!isDestroy) {
|
||
|
|
el.style.display = el.__vOriginalDisplay
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|