vue中自定义的DotLoading组件

样式预览：

注意点

注意参数loading需要在使用该组件的地方，正确传入；

<template>
	<DotLoading
		:loading='loading'
	>
	</DotLoading>
</template>
<script>
	export default {
		data() {
		    return {
		    	loading: true,
			}
		}
	}
</script>

源代码

<template>
  <div class="loading-wrapper" v-if="loading">
    <div
      class="loading-dot"
      v-for="(dot, index) in dots"
      :key="index"
      :class="{ active: index === currentIndex }"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'DotLoading',
  props: {
    // 控制loading状态的开关
    loading: {
      type: Boolean,
      default: () => false,
    }
  },
  data() {
    return {
      currentIndex: 0, // 当前变色的点的索引
      dots: [
        { color: "#f00", scale: 2 },
        { color: "#f00", scale: 2 },
        { color: "#f00", scale: 2 },
      ],
      animationDuration: 500, // 动画持续时间（毫秒）
      animationInterval: null, // 动画定时器
    };
  },
  mounted() {
    this.startLoadingAnimation();
  },
  beforeDestroy() {
    this.stopLoadingAnimation();
  },
  methods: {
    startLoadingAnimation() {
      if (this.loading) {
        this.animationInterval = setInterval(() => {
          this.currentIndex = (this.currentIndex + 1) % 3;
          this.updateDots();
        }, this.animationDuration);
      }
    },
    stopLoadingAnimation() {
      if (this.animationInterval) {
        clearInterval(this.animationInterval);
        this.animationInterval = null;
      }
      // 重置dots状态（可选）
      this.dots = this.dots.map((dot) => ({ ...dot, scale: 1, color: "#fff" }));
      this.currentIndex = 0;
    },
    updateDots() {
      // 更新dots数组中的颜色和大小
      this.dots = this.dots.map((dot, index) => {
        let color = "#ccc"; // 默认颜色
        let scale = 1; // 默认大小
        if (index === this.currentIndex) {
          color = "#4d71ff"; // 当前点的颜色
          scale = 1.5; // 当前点的大小
        } else if (index === (this.currentIndex + 2) % 3) {
          // 上一个变大的点稍微变小，模拟回弹效果（可选）
          scale = 1.2;
        }
        return { ...dot, color, scale };
      });
    },
  },
};
</script>

<style scoped>
.loading-wrapper {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-dot {
  width: 3px;
  height: 3px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.5s, transform 0.5s;
}

.loading-dot.active {
  background-color: #4d71ff;
  transform: scale(2);
}
</style>