Element-React 的 Loading（加载）组件用于显示加载状态，通常在数据加载或异步操作时使用。以下是一个简单的例子，演示如何在 Vue 组件中使用 Element-React 的 Loading 组件：

首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react

然后，在你的 Vue 组件中，可以这样使用 Loading：
<template>
  <div>
    <h3>Element-React Loading 加载</h3>
    <el-button @click="showLoading">显示加载</el-button>
    <el-loading :visible="loadingVisible" text="加载中..." :fullscreen="false"></el-loading>
  </div>
</template>

<script>
import { ElButton, ElLoading } from 'element-react';

export default {
  components: {
    ElButton,
    ElLoading,
  },
  data() {
    return {
      loadingVisible: false,
    };
  },
  methods: {
    showLoading() {
      this.loadingVisible = true;

      // 模拟异步操作
      setTimeout(() => {
        this.loadingVisible = false;
      }, 2000);
    },
  },
};
</script>

在这个例子中，我们引入了 Element-React 的 ElButton 和 ElLoading 组件，并在模板中使用它们。通过设置 visible 属性，你可以控制 Loading 组件的显示和隐藏。在异步操作完成后，需要手动将 visible 设置为 false，以隐藏 Loading。

可以根据实际需求设置 Loading 的文本、是否全屏显示等属性。请参考 Element-React 的官方文档：[Element-React Loading](https://element-plus.org/#/en-US/component/loading) 以获取更多详细信息和选项。


转载请注明出处：http://www.zyzy.cn/article/detail/5623/Element-React