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.pingtaimeng.com/article/detail/5623/Element-React