elementui loadding

ElementUI Loading 组件使用指南

ElementUI 提供了 Loading 组件用于在页面或局部区域显示加载状态。以下是几种常见的实现方式：

全局加载

// 开启加载
const loadingInstance = this.$loading({
  lock: true,
  text: '加载中',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

// 关闭加载
loadingInstance.close();

局部加载 在需要加载的 DOM 元素上添加 v-loading 指令：

<div v-loading="isLoading" element-loading-text="拼命加载中">
  需要加载的内容区域
</div>

自定义配置选项 可通过对象配置更多参数：

{
  target: '.loading-target',  // 指定DOM元素
  fullscreen: false,         // 是否全屏
  text: 'Loading',           // 提示文字
  spinner: 'el-icon-loading',// 图标类名
  background: 'rgba(0,0,0,0.5)' // 背景色
}

服务方式调用

import { Loading } from 'element-ui';

let loadingInstance = Loading.service(options);
setTimeout(() => {
  loadingInstance.close();
}, 3000);

注意事项

• 全屏加载会阻止用户交互，建议设置lock: true
• 局部加载需确保父容器有position: relative样式
• 2.0+版本需要单独引入样式文件import 'element-ui/lib/theme-chalk/loading.css'

以上方法可根据实际需求选择使用，全局加载适合整页数据请求，局部加载适用于模块级内容更新。