element ui 加载中

Element UI 是一套基于 Vue.js 的开源组件库，为开发者提供了丰富的可复用的 UI 组件。其中一个常用的组件是加载中（Loading）组件，用于在页面或某个元素上显示加载状态的动画。

Element UI 加载中组件的使用非常简单，只需要在需要显示加载状态的元素上添加 v-loading 指令即可。可以通过设置绑定的变量来控制加载状态的显示和隐藏。例如：

<template>
  <div>
    <div v-loading="loading">
      <!-- 页面内容 -->
    </div>
    <el-button @click="fetchData">加载数据</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false  // 默认为不显示加载状态
    }
  },
  methods: {
    fetchData() {
      this.loading = true;  // 在请求数据时显示加载状态
      // 执行数据请求操作...
      // 请求完成后隐藏加载状态
      this.loading = false;
    }
  }
}
</script>

上述代码中，使用了 v-loading 指令将 loading 变量与页面内容元素关联起来，当 loading 的值为 true 时，加载中状态会显示在元素上。通过点击“加载数据”按钮时，可以控制 loading 变量的值来显示和隐藏加载状态。

Element UI 的加载中组件提供了多种自定义选项，可以设置加载动画的样式、文本及遮罩层的背景色等。也可以通过设置全局配置来统一配置整个项目中的加载中组件。

使用 Element UI 的加载中组件可以提升用户体验，让用户知道正在进行某个操作并等待结果的到来。它的简单易用和丰富的配置选项使得开发者能够快速实现页面加载状态的展示。