用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
用于展示加载中的状态。
Tu View Plus<template>
<tu-spin :loading="true" />
</template><template>
<tu-spin :loading="true" />
</template>设置 size 可以得到不同尺寸的加载图标。
<template>
<tu-spin :loading="true" :size="10" />
<tu-spin :loading="true" class="ml-4" />
<tu-spin :loading="true" :size="18" class="ml-4" />
</template><template>
<tu-spin :loading="true" :size="10" />
<tu-spin :loading="true" class="ml-4" />
<tu-spin :loading="true" :size="18" class="ml-4" />
</template>通过 dot 属性，可以展示点类型的指示符。
<template>
<tu-spin :loading="true" :size="16" dot />
</template><template>
<tu-spin :loading="true" :size="16" dot />
</template>可以给任意内容添加加载中指示符。
泉眼无声惜细流，树阴照水爱晴柔。
小荷才露尖尖角，早有蜻蜓立上头。
泉眼无声惜细流，树阴照水爱晴柔。
小荷才露尖尖角，早有蜻蜓立上头。
<template>
<tu-row :gutter="20">
<tu-col :span="12">
<tu-spin :loading="loading">
<tu-card effect="up">
<p>泉眼无声惜细流，树阴照水爱晴柔。</p>
<p>小荷才露尖尖角，早有蜻蜓立上头。</p>
</tu-card>
</tu-spin>
</tu-col>
<tu-col :span="12">
<tu-spin :loading="loading" dot>
<tu-card effect="up">
<p>泉眼无声惜细流，树阴照水爱晴柔。</p>
<p>小荷才露尖尖角，早有蜻蜓立上头。</p>
</tu-card>
</tu-spin>
</tu-col>
</tu-row>
<tu-switch v-model="loading" class="mt-2"></tu-switch>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const loading = ref(false);
</script>
<style scoped></style><template>
<tu-row :gutter="20">
<tu-col :span="12">
<tu-spin :loading="loading">
<tu-card effect="up">
<p>泉眼无声惜细流，树阴照水爱晴柔。</p>
<p>小荷才露尖尖角，早有蜻蜓立上头。</p>
</tu-card>
</tu-spin>
</tu-col>
<tu-col :span="12">
<tu-spin :loading="loading" dot>
<tu-card effect="up">
<p>泉眼无声惜细流，树阴照水爱晴柔。</p>
<p>小荷才露尖尖角，早有蜻蜓立上头。</p>
</tu-card>
</tu-spin>
</tu-col>
</tu-row>
<tu-switch v-model="loading" class="mt-2"></tu-switch>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const loading = ref(false);
</script>
<style scoped></style>通过 tip 属性添加描述文案。
<template>
<tu-spin :loading="true" tip="加载中.." />
</template><template>
<tu-spin :loading="true" tip="加载中.." />
</template>通过 #icon 插槽可以自定义图标。
<template>
<tu-spin :loading="true" :size="20">
<template #icon>
<Loading />
</template>
</tu-spin>
</template>
<script lang="ts" setup>
import { Loading } from '@tu-view-plus/icons-vue';
</script><template>
<tu-spin :loading="true" :size="20">
<template #icon>
<Loading />
</template>
</tu-spin>
</template>
<script lang="ts" setup>
import { Loading } from '@tu-view-plus/icons-vue';
</script>| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| size | 尺寸 | Number | 14 |
| loading | 是否为加载中状态 | Boolean | true |
| dot | 是否使用点类型的动画 | Boolean | false |
| tip | 提示内容 | String | - |
| 参数名 | 描述 |
|---|---|
| default | 自定义内容 |
| tip | 提示内容 |
| icon | 自定义图标（自动旋转） |