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.
42 lines
1.1 KiB
42 lines
1.1 KiB
2 months ago
|
import { createLoading } from '/@/components/Loading';
|
||
|
|
import type { Directive, App } from 'vue';
|
||
|
|
|
||
|
|
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) {
|
||
|
|
if (binding.oldValue !== binding.value) {
|
||
|
|
instance.setLoading?.(binding.value && !instance.loading);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
unmounted(el) {
|
||
|
|
el?.instance?.close();
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export function setupLoadingDirective(app: App) {
|
||
|
|
app.directive('loading', loadingDirective);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default loadingDirective;
|