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.
39 lines
1.0 KiB
39 lines
1.0 KiB
import type { App, Directive } from 'vue' |
|
import { createLoading } from '@/components/Loading' |
|
|
|
const loadingDirective: Directive = { |
|
mounted(el, binding) { |
|
const tip = el.getAttribute('loading-tip') |
|
const background = el.getAttribute('loading-background') |
|
const size = el.getAttribute('loading-size') |
|
const fullscreen = !!binding.modifiers.fullscreen |
|
const instance = createLoading( |
|
{ |
|
tip, |
|
background, |
|
size: size || 'large', |
|
loading: !!binding.value, |
|
absolute: !fullscreen, |
|
}, |
|
fullscreen ? document.body : el, |
|
) |
|
el.instance = instance |
|
}, |
|
updated(el, binding) { |
|
const instance = el.instance |
|
if (!instance) |
|
return |
|
instance.setTip(el.getAttribute('loading-tip')) |
|
if (binding.oldValue !== binding.value) |
|
instance.setLoading?.(binding.value && !instance.loading) |
|
}, |
|
unmounted(el) { |
|
el?.instance?.close() |
|
}, |
|
} |
|
|
|
export function setupLoadingDirective(app: App<Element>) { |
|
app.directive('loading', loadingDirective) |
|
} |
|
|
|
export default loadingDirective
|
|
|