Element如何实现loading的方法示例

Element是一套基于Vue.js 2.0的UI框架，提供了许多常用组件，其中包括loading组件。下面是实现Element loading的方法示例攻略：

步骤一：引入Element UI库

在你的项目中引入Element UI库，可以通过CDN链接或者npm包管理器进行引入，这里我以npm包管理器进行说明。在终端中运行以下命令进行安装：

npm install element-ui --save

安装完成之后，在需要使用loading的组件中引入Element UI：

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

Vue.use(ElementUI)

步骤二：使用Element组件

Element组件中提供了loading组件可以直接使用，只需要在需要添加loading的组件中使用<el-loading>标签即可，如下所示：

<template>
  <div>
    <el-button type="primary" @click="showLoading">显示Loading</el-button>
    <el-button type="primary" @click="hideLoading">隐藏Loading</el-button>
    <el-loading :visible="loading" fullscreen></el-loading>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false
      }
    },
    methods: {
      showLoading() {
        this.loading = true
      },
      hideLoading() {
        this.loading = false
      }
    }
  }
</script>

在上面的示例中，我们创建了一个按钮，通过点击按钮可以控制loading组件的显示和隐藏。loading的样式和位置可以通过设置不同的属性来进行配置。如fullscreen属性可以让loading全屏显示。

示例二：使用Element方法

Element同时提供了方法调用的方式来操作loading组件的显示和隐藏。首先，需要在项目中引入loading组件：

import { Loading } from 'element-ui';

然后，我们可以创建一个全局的loading实例，并使用open()和close()方法来制定loading的显示和隐藏：

const loading = Loading.service({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

// 显示loading
loading.open();

// 隐藏loading
loading.close();

在上面的示例中，我们创建了一个全局的loading实例，并设置了loading的样式和显示文本。通过open()和close()方法来控制loading的显示和隐藏。

以上是关于Element如何实现loading的方法示例攻略，使用Element UI的loading组件和方法可以轻松地实现页面的loading效果。