程序员scholar
  • Element-UI
  • 反馈组件
scholar
2024-08-12
目录

加载组件 (Loading)

# 加载组件 (Loading)

Element UI 的 Loading 组件用于在数据加载或处理过程中展示加载动画，提示用户当前正在进行后台操作，防止用户在加载完成前执行其他操作。Loading 组件可以应用于页面或特定的 DOM 元素，具有高度的可定制性。

提示

Loading 组件官方文档：https://element.eleme.cn/#/zh-CN/component/loading (opens new window)

# 1. 基本用法

基本语法：Loading 组件可以通过指令或方法调用两种方式使用。指令方式使用更加简便，而方法调用可以提供更多的控制。

# 指令方式

通过 v-loading 指令，可以轻松地为任何元素或组件添加加载效果。v-loading 指令接收一个布尔值，当值为 true 时，加载效果会自动启用；当值为 false 时，加载效果关闭。

<template>
  <el-button type="primary" v-loading="loading">加载中</el-button>
</template>

<script>
export default {
  data() {
    return {
      loading: true // 控制加载状态的布尔值
    };
  },
  mounted() {
    // 模拟异步操作，2秒后关闭加载效果
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

image-20240810173548099

# 方法调用方式

方法调用方式可以通过 this.$loading 方法手动创建并控制加载效果，适用于需要更复杂的加载控制场景。与指令方式相比，方法调用方式提供了更多的配置选项，如自定义加载文本、图标、背景色等。

<template>
  <el-button type="primary" @click="openLoading">加载中</el-button>
</template>

<script>
export default {
  methods: {
    openLoading() {
      // 手动创建 Loading 实例，并进行配置
      const loadingInstance = this.$loading({
        lock: true, // 锁定屏幕滚动
        text: '加载中...', // 显示的加载文本
        spinner: 'el-icon-loading', // 自定义加载图标
        background: 'rgba(0, 0, 0, 0.7)' // 加载遮罩的背景色
      });

      // 模拟异步操作，3秒后关闭加载效果
      setTimeout(() => {
        loadingInstance.close(); // 手动关闭加载动画
      }, 3000);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

image-20240810173629291

# 2. Loading 配置选项

Loading 组件的 Options 提供了丰富的属性来控制加载动画的行为和样式。

参数 说明 类型 可选值 默认值
target Loading 需要覆盖的 DOM 节点 object/string — document.body
body 同 v-loading 指令中的 body 修饰符 boolean — false
fullscreen 同 v-loading 指令中的 fullscreen 修饰符 boolean — true
lock 同 v-loading 指令中的 lock 修饰符 boolean — false
text 显示在加载图标下方的加载文案 string — —
spinner 自定义加载图标类名 string — —
background 遮罩背景色 string — —
customClass Loading 的自定义类名 string — —

  • target：指定需要覆盖的 DOM 节点，可以是一个 DOM 对象或一个字符串（选择器）。如果未指定，默认覆盖整个页面。

  • body：决定 Loading 是否在 body 元素上显示，而不是覆盖整个页面。适合在组件内部使用。

  • fullscreen：是否全屏显示 Loading 动画，通常在页面级加载时使用，默认值为 true。

  • lock：加载时是否锁定屏幕滚动，防止用户在加载期间滚动页面。

  • text：设置加载动画下方的文本，可以提示用户加载的状态或操作。

  • spinner：自定义加载图标的类名，允许使用自定义的图标代替默认的加载动画。

  • background：设置加载遮罩的背景颜色，可以调整为半透明或其他颜色。

  • customClass：自定义 Loading 组件的类名，用于覆盖默认样式。

# 3. Loading 方法

在使用方法调用方式时，Loading 组件实例提供了一个 close 方法，用于手动关闭加载动画。

手动关闭示例

<template>
  <el-button type="primary" @click="openLoading">点击加载</el-button>
</template>

<script>
export default {
  methods: {
    openLoading() {
      const loadingInstance = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      setTimeout(() => {
        loadingInstance.close(); // 手动关闭加载动画
      }, 5000); // 5秒后关闭
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 4. Loading 应用场景

# 1. 页面级加载

在整个页面加载数据时，使用 fullscreen 模式展示加载动画，防止用户在数据加载完毕前进行操作。










 











<template>
  <el-button type="primary" @click="showLoading">加载页面</el-button>
</template>

<script>
export default {
  methods: {
    showLoading() {
      const loadingInstance = this.$loading({
        fullscreen: true,
        text: '加载中，请稍候...',
      });

      setTimeout(() => {
        loadingInstance.close();
      }, 3000); // 模拟数据加载
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

image-20240810173916616

# 2. 部分区域加载

当只需要对页面的某一部分进行加载时，可以通过设置 target 属性指定要覆盖的 DOM 元素。


 
 
 
 
 








 












<template>
  <div ref="loadingArea" style="position: relative;">
    <el-button type="primary" @click="showLoading">加载区域</el-button>
    <div style="height: 200px; background: #f5f5f5; margin-top: 20px;">
      加载内容区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    showLoading() {
      const loadingInstance = this.$loading({
        target: this.$refs.loadingArea,
        text: '加载中...',
        background: 'rgba(255, 255, 255, 0.9)'
      });

      setTimeout(() => {
        loadingInstance.close();
      }, 3000);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

image-20240810174022163

# 3. 自定义加载图标

通过设置 spinner 属性，可以使用自定义的图标来替换默认的加载动画。












 




























<template>
  <el-button type="primary" @click="showLoading">自定义图标</el-button>
</template>

<script>
export default {
  methods: {
    showLoading() {
      const loadingInstance = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'custom-loading-icon', // 自定义图标类名
        background: 'rgba(0, 0, 0, 0.7)'
      });

      setTimeout(() => {
        loadingInstance.close();
      }, 3000);
    }
  }
};
</script>

<style>
.custom-loading-icon {
  /* 自定义图标的 CSS 样式 */
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

image-20240810174132897

# 5. 自定义Loading加载

Element UI 的 Loading 组件在设计上主要是为了展示简单的加载动画，并没有直接提供自定义加载图标的支持。虽然通过 spinner 属性可以指定一个自定义的 CSS 类名来替换默认的加载图标，但由于 Element UI 的加载图标是基于 ::before 伪元素或者其他内置样式生成的，因此直接覆盖或替换它的效果可能会受到限制。

可行的替代方案

如果 Element UI 的 Loading 组件无法满足需求，你可以考虑以下替代方案来实现自定义的加载动画：

# 1. 自定义组件实现加载动画

可以完全自定义一个加载组件，不依赖 Element UI 的 Loading 组件。这将给你最大的灵活性去设计和控制加载动画的样式和行为。

<template>
  <div v-if="loading" class="custom-loading-overlay">
    <div class="custom-loading-content">
      <div class="custom-loading-icon"></div>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  }
};
</script>

<style scoped>
.custom-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-loading-content {
  text-align: center;
  color: #fff;
}

.custom-loading-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-image: url('https://your-avatar-image-url.com/avatar.png'); /* 替换为实际的头像URL */
  background-size: cover;
  animation: blink 1s infinite;
  margin-bottom: 10px;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

解释：

  • custom-loading-overlay：这是一个覆盖整个屏幕的遮罩层，背景是渐变色。
  • custom-loading-content：这里是加载内容的容器，包含自定义的图标和加载文本。
  • custom-loading-icon：这是你自定义的头像图标，通过 @keyframes blink 动画实现闪烁效果。

# 2. 使用其他加载动画库

如果你需要更复杂或者更加灵活的加载动画，可以考虑使用专门的动画库，如 SpinKit (opens new window)，或者通过 Lottie (opens new window) 集成复杂的动画效果。

结论

Element UI 的 Loading 组件在自定义加载图标方面确实存在一定限制。如果自定义的需求较多，推荐手动创建一个自定义的加载动画组件，这样可以更灵活地控制动画的样式、行为和效果。

编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
警告组件 (Alert)
消息提示组件 (Message)

← 消息提示组件 (Message)→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar