---
name: arco-vue-spin
description: "Arco Design Vue 加载中 Spin 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-spin>`、属性、事件、插槽、示例和实现细节。"
user-invocable: false
---

# 加载中 Spin

## 简介

用于展示加载中的状态。

## 基本用法

```vue
<template>
  <a-spin />
</template>
```

## API

### `<spin>` 属性

|参数名|描述|类型|默认值|
|---|---|---|:---:|
|size|尺寸|`number`|`-`|
|loading|是否为加载中状态（仅在容器模式下生效）|`boolean`|`false`|
|dot|是否使用点类型的动画|`boolean`|`false`|
|tip|提示内容|`string`|`-`|
|hide-icon|是否隐藏图标|`boolean`|`false`|

### `<spin>` 插槽

|插槽名|描述|参数|
|---|:---:|---|
|tip|自定义提示内容|-|
|element|自定义元素|-|
|icon|自定义图标（自动旋转）|-|

## 常用模式

- **不同尺寸**：设置 `size` 可以得到不同尺寸的加载图标。
- **点类型指示符**：通过 `dot` 属性，可以展示点类型的指示符。
- **容器中**：可以给任意内容添加加载中指示符。
- **添加描述文案**：通过 `tip` 属性添加描述文案。
- **自定义图标**：通过 `#icon` 插槽可以自定义图标。

## 最佳实践

- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
- 弹窗、抽屉、确认框等显隐状态使用 `v-model:visible` 或组件提供的方法统一管理。
- 异步操作要配合 `loading`、禁用态或全局反馈，避免重复提交。