elementui 怎么给div加上loading

ElementUI 提供了一个 Loading 组件，可以在需要的时候给任意元素加上 Loading 效果。具体实现方法如下：

1. 在需要加上 Loading 效果的 div 元素外面包一个 el-loading-container 的 div：

<div class="el-loading-container">
  <div id="my-div">这是需要加上 Loading 效果的 div</div>
</div>

2. 在 JavaScript 中获取要加上 Loading 效果的 div 元素，并使用 ElementUI 的 Loading 组件进行包装：

import { Loading } from 'element-ui';

const myDiv = document.getElementById('my-div');

// 创建 Loading 实例
const loadingInstance = Loading.service({
  target: '.el-loading-container', // 指定 Loading 的父元素
  fullscreen: false, // 是否全屏显示
  text: 'Loading', // 加载文字
  spinner: 'el-icon-loading', // 加载图标
  background: 'rgba(0, 0, 0, 0.7)', // 遮罩层背景色
});

// 加载完成后销毁 Loading 实例
loadingInstance.close();

上面的代码中，我们首先通过 document.getElementById() 方法获取了要加上 Loading 效果的 div 元素，然后使用 Loading.service() 方法创建了一个 Loading 实例，并指定了它的一些属性，如 target、text、spinner、background 等。最后，我们可以在需要的时候调用 loadingInstance.close() 方法来销毁 Loading 实例，停止 Loading 效果的显示。

需要注意的是，为了让 Loading 效果正常显示，我们还需要在全局样式中添加以下样式：

.el-loading-parent--relative {
  position: relative !important;
}

.el-loading-parent--hidden {
  overflow: hidden !important;
}

.el-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 2000;
}

.el-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2001;
}

这些样式是 Loading 组件的核心样式，负责实现 Loading 效果的显示和遮罩层的生成。