Vue.js 自定义加载组件深度解析：打造优雅的点状动画效果

1<template>
2  <div 
3    class="dot-loading-wrapper" 
4    :class="{ 'dot-loading-fixed': appendToBody }"
5    v-if="visible"
6  >
7    <div class="dot-loading-overlay">
8      <div class="dot-loading-content">
9        <!-- 点状动画 -->
10        <div class="dots-loading">
11          <div class="dot"></div>
12        </div>
13        <!-- 加载文字 -->
14        <div class="loading-text">{{ text }}</div>
15        <!-- 进度百分比 -->
16        <div class="loading-progress" v-if="showProgress">{{ progress }}%</div>
17      </div>
18    </div>
19  </div>
20</template>

1props: {
2  visible: { type: Boolean, default: false },      // 显示控制
3  text: { type: String, default: '正在导入中...' }, // 文案定制
4  showProgress: { type: Boolean, default: false }, // 进度开关
5  progress: { type: Number, default: 0 },          // 进度值
6  fullscreen: { type: Boolean, default: true },    // 全屏模式
7  appendToBody: { type: Boolean, default: false }  // 固定定位
8}

1.dot {
2  width: 10px;
3  height: 10px;
4  background-color: rgba(78, 205, 196, 0.3);
5  border-radius: 50%;
6  
7  // 使用box-shadow创建其他8个点
8  box-shadow:
9    -26px -26px 0 0px rgba(78, 205, 196, 0.3), // 上左
10    0px -26px 0 0px rgba(78, 205, 196, 0.3),    // 上中
11    26px -26px 0 0px rgba(78, 205, 196, 0.3),   // 上右
12    -26px 0 0 0px rgba(78, 205, 196, 0.3),      // 中左
13    26px 0 0 0px rgba(78, 205, 196, 0.3),       // 中右
14    -26px 26px 0 0px rgba(78, 205, 196, 0.3),   // 下左
15    0px 26px 0 0px rgba(78, 205, 196, 0.3),     // 下中
16    26px 26px 0 0px rgba(78, 205, 196, 0.3);    // 下右
17}

1@keyframes dotGridWave {
2  0% { /* 初始状态：右上角和中左点亮 */ }
3  14.3% { /* 中心、左上、下中点亮 */ }
4  28.6% { /* 上中、中右、下左点亮 */ }
5  42.9% { /* 右上、右下点亮 */ }
6  57.1% { /* 中心、中左点亮 */ }
7  71.4% { /* 左上、中右点亮 */ }
8  85.7% { /* 上中、下中、右下点亮 */ }
9  100% { /* 回到初始状态 */ }
10}

1@media (max-width: 768px) {
2  .dots-loading {
3    width: 80px;    // 缩小容器
4    height: 80px;
5    
6    .dot {
7      width: 7px;   // 缩小点尺寸
8      height: 7px;
9      animation: dotGridWaveMobile 2s infinite ease-in-out;
10      
11      // 调整间距：26px → 20px
12      box-shadow: /* 移动端专用阴影配置 */;
13    }
14  }
15}

1.dot-loading-wrapper {
2  position: absolute;  // 默认：相对父容器
3  
4  &.dot-loading-fixed {
5    position: fixed;   // 可选：固定到视口
6    z-index: 9999;
7    
8    .dot-loading-overlay {
9      background-color: rgba(255, 255, 255, 0.4); // 半透明遮罩
10    }
11  }
12}

1.dot {
2  animation: dotGridWave 2s infinite ease-in-out;
3}

1.dot-loading-overlay {
2  background-color: rgba(255, 255, 255, 1);
3  display: flex;
4  align-items: center;
5  justify-content: center;
6}

1<template>
2  <div class="data-container">
3    <DotLoading 
4      :visible="loading" 
5      text="正在加载数据..."
6      :show-progress="true"
7      :progress="loadProgress"
8    />
9    <!-- 数据内容 -->
10  </div>
11</template>

1<template>
2  <DotLoading 
3    :visible="uploading"
4    text="正在上传文件..."
5    :append-to-body="true"
6    :show-progress="true"
7    :progress="uploadProgress"
8  />
9</template>

1<template>
2  <DotLoading 
3    :visible="routeChanging"
4    text="页面加载中..."
5    :append-to-body="true"
6  />
7</template>

1.dot {
2  --primary-color: #4ECDC4;
3  --primary-alpha: 0.3;
4  
5  background-color: rgba(var(--primary-color), var(--primary-alpha));
6}

1props: {
2  animationType: {
3    type: String,
4    default: 'wave',
5    validator: value => ['wave', 'pulse', 'rotate'].includes(value)
6  }
7}

1computed: {
2  loadingText() {
3    return this.text || this.$t('common.loading');
4  }
5}