Spin 加载中

用于页面和区块的加载中状态。

何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

代码演示

基本

一个简单的 loading 状态

<v-spin></v-spin>

自定义描述文案

自定义描述文案，指定的 tip 文案会直接代替 …

<v-spin tip="正在读取数据.">
    <v-alert type="info" message="消息提示的文案"
      description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
    ></v-alert>
</v-spin>

各种大小

小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。

<v-spin size="small"></v-spin>
<v-spin></v-spin>
<v-spin size="large"></v-spin>

卡片加载中

可以直接把内容内嵌到 Spin 中，将现有容器变为加载状态。

<template>
    <v-spin :spinning="spinning" tip="加载中">
        <v-alert type="info" message="消息提示的文案" description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍">
        </v-alert>
    </v-spin>
    切换加载状态：<v-switch v-model="spinning"></v-switch>
</template>
<script>
export default {
   data: ()=> ({
       spinning:false
   })
}
<script>

API

Spin Props