ElementUI中Loading特效的使用

ElementUI中的Loading组件可以为页面或某个元素添加一个加载中的效果，以提高用户体验。以下是使用ElementUI Loading组件的步骤：

1. 在Vue组件中引入ElementUI库和Loading组件。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  name: 'MyComponent',
  components: {
    ElLoading: ElementUI.Loading
  },
  // ...
}

2. 在模板中使用Loading组件。

<template>
  <div>
    <el-button @click="showLoading">点击我加载</el-button>
    <div v-if="loading">
      <el-loading fullscreen></el-loading>
    </div>
  </div>
</template>

3. 在Vue组件中定义loading变量，并在点击按钮时将其设置为true，以显示Loading组件。

export default {
  name: 'MyComponent',
  components: {
    ElLoading: ElementUI.Loading
  },
  data() {
    return {
      loading: false
    };
  },
  methods: {
    showLoading() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 3000);
    }
  }
}

在上面的例子中，点击按钮时会触发showLoading方法，将loading变量设置为true，从而显示Loading组件。3秒后Loading组件会自动消失，因为loading变量被重新设置为false。

以上是使用ElementUI Loading特效的简单示例。您可以根据需要自定义Loading组件的样式和行为，以满足您的特定需求。