使用Vue 3和TypeScript开发一个简单的加载组件（Loading Component）的源码解析

使用Vue 3和TypeScript开发一个简单的加载组件（Loading Component）的源码解析

作为Vue开发者，经常需要在应用程序中添加加载状态的指示器。在本篇文章中，我们将使用Vue 3和TypeScript来开发一个简单的加载组件。这个组件将展示一个旋转的加载图标，并且可以通过传递props来自定义加载图标的颜色和大小。

我们将使用vant作为参考，它是一个流行的Vue组件库，提供了许多实用的UI组件。我们将从vant的源码中学习，并编写一个仅有88行代码的JavaScript版本的加载组件。

首先，我们需要创建一个Vue单文件组件（.vue文件）来实现我们的加载组件。我们可以将其命名为Loading.vue。

<template>
  <div class="loading" :style="{ color: color, fontSize: size + 'px' }">
    <svg class="loading-icon" viewBox="25 25 50 50">
      <circle class="circle" cx="50" cy="50" r="20" fill="no