41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import Vue from 'vue';
|
||
|
||
/**
|
||
* 自动恢复加载状态的指令
|
||
* 用法: v-loading-recovery="{ loading: 'loadingProp', recovery: ['method1', 'method2'] }"
|
||
*/
|
||
export const loadingRecoveryDirective = {
|
||
// 当绑定元素插入到 DOM 中时
|
||
inserted(el, binding, vnode) {
|
||
const component = vnode.context;
|
||
const { loading, recovery } = binding.value || {};
|
||
|
||
if (!loading || !recovery || !Array.isArray(recovery)) return;
|
||
|
||
// 为组件添加加载状态恢复的逻辑
|
||
const handleNetworkRecovery = () => {
|
||
// 当网络恢复时，自动设置loading为false
|
||
if (component[loading]) {
|
||
component[loading] = false;
|
||
}
|
||
};
|
||
|
||
// 保存到元素上，以便后续清理
|
||
el._loadingRecovery = handleNetworkRecovery;
|
||
window.addEventListener('network-retry-complete', handleNetworkRecovery);
|
||
|
||
console.log(`[LoadingRecovery] 添加加载状态恢复: ${loading}`);
|
||
},
|
||
|
||
// 当指令与元素解绑时
|
||
unbind(el) {
|
||
// 清理事件监听
|
||
if (el._loadingRecovery) {
|
||
window.removeEventListener('network-retry-complete', el._loadingRecovery);
|
||
delete el._loadingRecovery;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 注册全局指令
|
||
Vue.directive('loading-recovery', loadingRecoveryDirective); |