在Element UI中，您可以通过自定义指令来创建一个全局加载动画。以下是一个简单的示例，展示了如何实现一个自定义加载动画：
- 首先，创建一个自定义指令：
// 在Vue中注册一个全局自定义指令 `v-loading`
Vue.directive('loading', {
bind(el, binding, vnode) {
const div = document.createElement('div');
div.setAttribute('class', 'loading-mask');
div.innerHTML = `
<div class="loading-spinner">
<!-- 这里可以放置您的加载动画HTML -->
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
</div>
`;
div.style.display = 'none';
el.appendChild(div);
el.loadingMask = div;
},
inserted(el) {
if (el.loadingMask) {
el.loadingMask.style.display = 'block';
}
},
unbind(el) {
if (el.loadingMask) {
el.loadingMask.style.display = 'none';
}
}
});
- 在样式表中添加对应的CSS类：
.loading-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.loading-spinner {
/* 定义您的加载动画样式 */
}
- 在Vue组件中使用自定义指令：
<template>
<div v-loading="isLoading">
<!-- 这里是您的组件内容 -->
</div>
</template>
<script>
export default {
data() {
return {
isLoading: false
};
},
methods: {
startLoading() {
this.isLoading = true;
// 模拟异步操作
setTimeout(() => {
this.isLoading = false;
}, 3000);
}
}
};
</script>
在上述示例中，当isLoading设置为true时，自定义指令会在Vue组件中添加一个遮罩层，并显示一个旋转的图标作为加载动画。当异步操作完成后，将isLoading设置为false，遮罩层将被移除。
请根据实际需求调整加载动画的HTML和CSS样式。