54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { ObjectDirective } from '@vue/runtime-core'
|
|
|
|
interface VShowElement extends HTMLElement {
|
|
// _vod = vue original display
|
|
_vod: string
|
|
}
|
|
|
|
export const vShow: ObjectDirective<VShowElement> = {
|
|
beforeMount(el, { value }, { transition }) {
|
|
el._vod = el.style.display === 'none' ? '' : el.style.display
|
|
if (transition && value) {
|
|
transition.beforeEnter(el)
|
|
} else {
|
|
setDisplay(el, value)
|
|
}
|
|
},
|
|
mounted(el, { value }, { transition }) {
|
|
if (transition && value) {
|
|
transition.enter(el)
|
|
}
|
|
},
|
|
updated(el, { value, oldValue }, { transition }) {
|
|
if (!value === !oldValue) return
|
|
if (transition) {
|
|
if (value) {
|
|
transition.beforeEnter(el)
|
|
setDisplay(el, true)
|
|
transition.enter(el)
|
|
} else {
|
|
transition.leave(el, () => {
|
|
setDisplay(el, false)
|
|
})
|
|
}
|
|
} else {
|
|
setDisplay(el, value)
|
|
}
|
|
},
|
|
beforeUnmount(el, { value }) {
|
|
setDisplay(el, value)
|
|
}
|
|
}
|
|
|
|
if (__NODE_JS__) {
|
|
vShow.getSSRProps = ({ value }) => {
|
|
if (!value) {
|
|
return { style: { display: 'none' } }
|
|
}
|
|
}
|
|
}
|
|
|
|
function setDisplay(el: VShowElement, value: unknown): void {
|
|
el.style.display = value ? el._vod : 'none'
|
|
}
|