vue element-ui Loading加载事件的使用以及自定义Loading加载动画

在Vue中使用Element UI的Loading组件可以通过调用Loading服务来实现。以下是如何使用Element UI的Loading服务以及如何自定义Loading动画的例子。

使用Element UI的Loading服务

// 引入Element UI的Loading服务
import { Loading } from 'element-ui';
 
// 在Vue组件中使用
export default {
  methods: {
    showLoading() {
      // 显示Loading动画
      this.loadingInstance = Loading.service({
        lock: true, // 是否锁定body滚动
        text: '加载中...', // 显示的文本
        background: 'rgba(0, 0, 0, 0.7)' // 背景颜色
      });
    },
    closeLoading() {
      // 关闭Loading动画
      this.loadingInstance.close();
    }
  }
};

自定义Loading动画

如果你想自定义Loading动画，可以使用Element UI的全局配置或者自定义指令。

全局配置

import { Loading } from 'element-ui';
 
// 自定义Loading配置
Loading.setDefaultOptions({
  text: '自定义加载中...',
  spinner: 'el-icon-loading', // 使用自定义图标
  background: 'rgba(0, 0, 0, 0.3)'
});
 
// 使用Loading服务
Loading.service(options);

自定义指令

import { Loading } from 'element-ui';
 
// 自定义指令
Vue.directive('loading', {
  bind(el, binding) {
    const loadingInstance = Loading.service(Object.assign({
      target: el,
      fullscreen: true // 或者使用其他配置
    }, binding.value));
    el.$loading = loadingInstance;
  },
  unbind(el) {
    if (el.$loading) {
      el.$loading.close();
    }
  }
});
 
// 在Vue组件中使用
<template>
  <div v-loading="isLoading">
    <!-- 内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    showLoading() {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
    }
  }
};
</script>

在这个自定义指令的例子中，我们创建了一个v-loading指令，绑定到一个变量isLoading上。当isLoading为true时，显示Loading动画，为false时关闭。这样可以更灵活地控制Loading的显示和隐藏。