Element UI的loading动画替换为Vue组件

Element UI的Loading动画替换为Vue组件的实现步骤：

1. 创建一个自定义的Loading组件比如

<!-- Loading.vue -->
<template>
  <div class="custom-loading">
    <i class="el-icon-loading"></i>
    <p>{{ text }}</p>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  }
}
</script>

2. 在需要使用的位置替换默认Loading

// 创建Loading组件实例
const MyLoading = Vue.extend(require('./Loading.vue'))
// 显示自定义Loading
this.loading = this.$loading({
  fullscreen: false,
  text: '加载中...',
  spinner: 'el-icon-loading',
  background: '#f2f2f2'
})
// 清空Element UI原有的Loading内容
this.loading.$el.innerHTML = ''
// 创建自定义组件实例并挂载
const loadingInstance = new MyLoading({
  propsData: {
    text: '加载中...'
  }
})
loadingInstance.$mount()
this.loading.$el.appendChild(loadingInstance.$el)

// 销毁时清理或关闭
this.loading.close()