Vue 自定义ElementUI的Loading效果

在Vue中，可以通过自定义指令来覆盖ElementUI的Loading效果。以下是一个简单的自定义指令示例，用于显示和隐藏自定义的Loading效果：

// 注册一个全局自定义指令 `v-loading`
Vue.directive('loading', {
  bind(el, binding, vnode) {
    const div = document.createElement('div');
    div.setAttribute('class', 'custom-loading');
    div.innerHTML = '<div>Loading...</div>';
    div.style.display = 'none';
    el.appendChild(div);
    el.loadingDiv = div;
  },
  inserted(el, binding, vnode) {
    el.loadingDiv.style.display = binding.value ? 'block' : 'none';
  },
  update(el, binding, vnode) {
    if (binding.oldValue !== binding.value) {
      el.loadingDiv.style.display = binding.value ? 'block' : 'none';
    }
  },
  unbind(el, binding, vnode) {
    el.loadingDiv && el.removeChild(el.loadingDiv);
  }
});
 
// 在Vue组件中使用
<template>
  <div v-loading="isLoading">
    <!-- 这里是你的内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isLoading: false
    };
  }
};
</script>
 
<style>
.custom-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
}
</style>

在这个示例中，我们创建了一个名为v-loading的自定义指令，它会在绑定的元素内部添加一个div来显示Loading信息。通过绑定的值isLoading来控制Loading效果的显示和隐藏。当isLoading为true时，Loading效果会显示；为false时，Loading效果会隐藏。这个指令可以很容易地被集成到任何Vue组件中，并提供一个简单的自定义Loading解决方案。