用SVG和Vue3构建一个极简高效的加载提示组件

发表于 分类于 ， 阅读次数：

在开发现代Web应用时，加载提示是一个不可忽视的小细节——它不仅能提升用户体验，还能避免让用户在等待时“焦头烂额”。但说到加载动画，大家往往会想到图片、GIF或者其他需要大量资源的方式。那么，如果我们不用这些沉重的资源，能否创造出既轻量又炫酷的效果呢？答案是肯定的！今天，我们就来聊聊如何用SVG和Vue 3实现一个高效、低耦合的加载提示组件。

1. 组件设计：轻量化与高效性并存

我们先从最基本的Loading.vue组件入手，看看它是如何轻松处理加载提示的。

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <transition name="fade">
    <div v-if="visible" class="fixed inset-0 w-full h-full bg-[rgba(230,253,260)] flex flex-col items-center justify-center z-[1000]">
      <svg class="w-[200px] h-[50px]" viewBox="0 0 200 50">
        <text x="10" y="35" class="text-[#333333] animate-stroke">
          {{ message }}
        </text>
      </svg>
    </div>
  </transition>
</template>

首先，咱们决定抛弃那些沉重的图片和动画文件，转而使用SVG。为什么呢？因为SVG不仅体积小、加载快，而且能通过CSS轻松控制动画。这里，SVG被用来绘制动态文本——就是你加载时看到的那个“加载中”的提示，整个UI看起来既简洁又现代。

关键点：

  • <transition>：Vue的过渡动画，帮助我们控制加载组件的显示和隐藏，做到了淡入淡出的效果。
  • <svg>：绘制文字，简洁又高效。不用担心图片的资源浪费，完全通过矢量图形展示，且清晰度完美。

2. 动画效果：让加载提示动起来

当然，光是静态的文本显示可不够有趣。为了增加互动感，我们加了一些动画效果，让加载提示更具活力。

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
@keyframes stroke {
  0% {
    stroke-dasharray: 0 200;
    fill: transparent;
  }
  50% {
    stroke-dasharray: 100 100;
    fill: transparent;
  }
  100% {
    stroke-dasharray: 200 0;
    fill: #333333;
  }
}

.animate-stroke {
  font-size: 32px;
  font-weight: bold;
  fill: transparent;
  stroke: #333333;
  stroke-width: 1;
  stroke-dasharray: 200 0;
  animation: stroke 2s ease-in-out infinite alternate;
}

这段CSS动画让文字的描边从“无到有”，渐渐呈现出来——就像笔刷勾勒出文字的轮廓。通过stroke-dasharray和@keyframes，我们实现了文字逐步显现的效果，给人一种动态的感觉，极大地提升了视觉体验。

关键点：

  • stroke-dasharray：通过这项技术，模拟了“画笔”在文字上划过的效果，让文字的显示充满动感。
  • 动画循环：通过infinite和alternate设置，文字的描边动画不断往返进行，增加了动画的生动感。

3. 高度可控制：外部灵活调用

这部分才是技术大佬们最爱的地方——灵活性！加载提示组件不仅在页面中轻松展示，而且我们通过一个服务层来控制其显示和隐藏。这样，外部组件可以直接控制加载提示的生命周期，避免了直接操作DOM或状态的繁琐过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const LoadingService = {
  open(message = "加载中") {
    if (!loadingInstance) {
      const loadingApp = createApp(Loading);
      const mountNode = document.createElement("div");
      document.body.appendChild(mountNode);
      loadingInstance = loadingApp.mount(mountNode) as LoadingInstance;
    }
    loadingInstance.open(message);
  },
  close() {
    if (loadingInstance) {
      loadingInstance.close();
    }
  },
};

通过这种方式，我们可以在任意位置、任意时刻控制加载提示组件的开启与关闭。想象一下，当你进行网络请求时，调用LoadingService.open("加载中...")，就能立即显示加载提示。请求完成后，调用LoadingService.close()，加载提示悄无声息地消失。这种封装设计让代码更具可维护性和可扩展性。

关键点：

  • 服务模式：通过LoadingService单例模式管理组件的显示与隐藏，确保在任何地方都能优雅地控制加载动画。
  • 外部调用：外部代码无需了解加载组件的内部实现，只需调用open和close方法即可，非常直观。

4. 实际应用：与异步操作的结合

加载提示组件的实际应用通常和异步操作密切相关。看看下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onBeforeMount(() => {
  LoadingPlugin.open("MicroMatrix");
  Api.get(
    getRomByCategory(),
    null,
    (response: Response) => {
      categories.value = response.data as Category[];
      LoadingPlugin.close();
    },
    (_error: Response) => {
      LoadingPlugin.close();
    }
  );
});

这里，LoadingPlugin.open("MicroMatrix")在数据请求开始时显示加载提示，而在API请求结束时（无论成功或失败），我们都会调用LoadingPlugin.close()来关闭提示。这样，用户在等待数据时，能清晰地看到加载状态，避免了等待过程中的迷茫。

关键点：

  • 与API请求配合：通过控制LoadingPlugin的状态，我们能够在网络请求进行时让用户知道正在加载，提升了用户体验。
  • 简洁的生命周期管理：只需调用open和close，即可简洁地管理加载状态，避免了额外的复杂逻辑。

5. 总结：少即是多，极简的设计哲学

在这段代码里，我们实现了一个高效且低耦合的加载提示组件，它的核心优势有三：

  1. 轻量高效：完全依靠SVG和CSS动画，不需要图片等外部资源，加载速度快，体积小。
  2. 高度封装：通过LoadingService进行统一管理，避免了直接在各个地方操作DOM或状态的麻烦，增加了代码的可维护性。
  3. 易于集成：外部只需要调用open和close方法即可控制加载提示，非常简洁直观。

这正是“少即是多”的设计哲学的体现：在简单、低耦合的基础上，依然能够实现复杂的动态效果和良好的用户体验。

通过这一实现，我们可以看到，SVG + Vue 3不仅能帮助我们构建高效的组件，还能通过巧妙的动画设计让应用看起来更加生动与现代。如果你也在寻找一种轻量、易于维护的加载提示解决方案，不妨试试看这个方法，它将为你带来意想不到的效果！