element ui loading怎么用

要使用 Element UI 中的 Loading 组件，您需要先安装 Element UI 并引入相应的模块。以下是一个简单的示例，展示了如何在 Vue.js 中使用 Element UI 的 Loading 组件：

首先，确保您已经安装了 Vue.js 和 Element UI。您可以通过以下命令使用 npm 进行安装：

npm install vue
npm install element-ui

接下来，在您的 Vue 组件中，导入 Loading 组件：

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

Vue.use(ElementUI);

然后，您可以在组件中使用 Loading 组件了。例如，在一个按钮的点击事件中显示一个加载状态：

<template>
  <div>
    <el-button @click="showLoading">显示加载状态</el-button>
    <el-loading v-if="loading" :text="loadingText" :background="loadingBackground" :spinner="loadingSpinner"></el-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      loadingText: '加载中...', // 可选，自定义加载文字
      loadingBackground: 'rgba(0, 0, 0, 0.7)', // 可选，自定义加载背景色
      loadingSpinner: 'el-icon-loading', // 可选，自定义加载图标
    };
  },
  methods: {
    showLoading() {
      this.loading = true;
      // 模拟异步操作
      setTimeout(() => {
        this.loading = false;
      }, 3000);
    },
  },
};
</script>

以上代码中，`el-loading` 组件通过 `v-if` 控制是否显示加载状态。您可以根据需要自定义加载文字、背景色和加载图标，通过相应的属性进行设置。

请注意，以上示例仅为简单演示如何使用 Element UI 的 Loading 组件。您还可以通过查阅 Element UI 的官方文档来了解更多关于 Loading 组件的用法和配置选项。