elementui 自定义loading动画加载层

在Element UI中，您可以通过自定义指令来创建一个全局加载动画。以下是一个简单的示例，展示了如何实现一个自定义加载动画：

1. 首先，创建一个自定义指令：

// 在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';
    }
  }
});

2. 在样式表中添加对应的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 {
  /* 定义您的加载动画样式 */
}

3. 在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样式。