Vue3 + TypeScript 二次封装 Ant Design Spin 组件：实现全局加载的全新体验

2023-12-09 08:40:34

使用 Vue3 和 TypeScript 对 Ant Design Vue4.x 的 Spin 组件进行二次封装

前言

加载状态在前端开发中至关重要，它直接影响用户体验、代码可维护性和可扩展性。Ant Design Vue4.x 提供了 Spin 组件，可以轻松地为应用程序添加加载指示器。然而，为了在整个应用程序中以一致且可配置的方式显示加载状态，我们需要对 Spin 组件进行二次封装。本文将深入探讨如何使用 Vue3 和 TypeScript 实现这一目标。

创建一个 Vue3 项目

使用 Vue CLI 创建一个新的 Vue3 项目：

vue create spin-service-example

安装必需的依赖项：

npm install ant-design-vue@4 antd-dayjs-webpack-plugin@2 tslib@2

创建 Spin 组件

在 src 目录中，创建一个新的组件文件 Spin.vue：

<template>
  <a-spin :spinning="loading">
    <slot />
  </a-spin>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useLoading } from '../hooks/useLoading';

export default defineComponent({
  name: 'Spin',
  setup() {
    const { loading } = useLoading();
    return { loading };
  },
});
</script>

创建加载服务

在 src/hooks 目录中，创建一个新的钩子文件 useLoading.ts：

import { reactive, ref } from 'vue';

export const useLoading = () => {
  const loading = ref(false);
  const show = () => (loading.value = true);
  const hide = () => (loading.value = false);
  return { loading, show, hide };
};

使用 Spin 组件和加载服务

在 src/App.vue 中，使用 Spin 组件和加载服务：

<template>
  <div>
    <button @click="showLoading">Show Loading</button>
    <button @click="hideLoading">Hide Loading</button>

    <Spin>
      <h1>Loading...</h1>
    </Spin>
  </div>
</template>

<script lang="ts">
import { useLoading } from './hooks/useLoading';

export default {
  setup() {
    const { loading, show, hide } = useLoading();

    const showLoading = () => show();
    const hideLoading = () => hide();

    return { showLoading, hideLoading, loading };
  },
};
</script>

结论

通过本指南，我们成功地对 Ant Design Vue4.x 的 Spin 组件进行了二次封装，并实现了全局加载形式。这种方法使我们能够以一致且可配置的方式轻松地在应用程序中处理加载状态。此外，通过服务的方式进行调用，我们可以在任何需要的地方灵活地显示或隐藏加载状态。这极大地提高了用户体验，同时还提高了代码的可维护性和可扩展性。