• Spin 加载中
    • 何时使用
    • 代码演示
      • 基本用法
      • 各种大小
      • 容器
      • 卡片加载中
      • 自定义描述文案
      • 延迟
      • 自定义指示符
  • API
    • 静态方法

    Spin 加载中

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

    何时使用

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

    代码演示

    Spin加载中 - 图1

    基本用法

    一个简单的 loading 状态。

    1. <template>
    2.   <div>
    3.     <a-spin />
    4.   </div>
    5. </template>

    Spin加载中 - 图2

    各种大小

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

    1. <template>
    2.   <div>
    3.     <a-spin size="small" />
    4.     <a-spin />
    5.     <a-spin size="large" />
    6.   </div>
    7. </template>

    Spin加载中 - 图3

    容器

    放入一个容器中。

    1. <style scoped>
    2.   .example {
    3.     text-align: center;
    4.     background: rgba(0,0,0,0.05);
    5.     border-radius: 4px;
    6.     margin-bottom: 20px;
    7.     padding: 30px 50px;
    8.     margin: 20px 0;
    9.   }
    10. </style>
    11. <template>
    12.   <div class="example">
    13.     <a-spin />
    14.   </div>
    15. </template>

    Spin加载中 - 图4

    卡片加载中

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

    1. <style scoped>
    2.   .spin-content{
    3.     border: 1px solid #91d5ff;
    4.     background-color: #e6f7ff;
    5.     padding: 30px;
    6.   }
    7. </style>
    8. <template>
    9.   <div>
    10.     <a-spin :spinning="spinning">
    11.       <div class="spin-content">
    12.         可以点击‘切换’按钮，控制本区域的spin展示。
    13.       </div>
    14.     </a-spin>
    15.     Loading state：<a-switch v-model="spinning"></a-switch>
    16.   </div>
    17. </template>
    18. <script>
    19.   export default {
    20.     data () {
    21.       return {
    22.         spinning: false
    23.       }
    24.     },
    25.     methods: {
    26.       changeSpinning(){
    27.         this.spinning = !this.spinning
    28.       }
    29.     },
    30.   }
    31. </script>

    Spin加载中 - 图5

    自定义描述文案

    自定义描述文案。

    1. <style scoped>
    2.   .spin-content{
    3.     border: 1px solid #91d5ff;
    4.     background-color: #e6f7ff;
    5.     padding: 30px;
    6.   }
    7. </style>
    8. <template>
    9.   <div>
    10.     <a-spin tip="Loading...">
    11.       <div class="spin-content">
    12.         我的描述文案是自定义的。。。
    13.       </div>
    14.     </a-spin>
    15.   </div>
    16. </template>

    Spin加载中 - 图6

    延迟

    延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。

    1. <style scoped>
    2.   .spin-content{
    3.     border: 1px solid #91d5ff;
    4.     background-color: #e6f7ff;
    5.     padding: 30px;
    6.   }
    7. </style>
    8. <template>
    9.   <div>
    10.     <a-spin :spinning="spinning" :delay="delayTime">
    11.       <div class="spin-content">
    12.         可以点击‘切换’按钮，延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
    13.       </div>
    14.     </a-spin>
    15.     Loading state：<a-switch v-model="spinning"></a-switch>
    16.   </div>
    17. </template>
    18. <script>
    19.   export default {
    20.     data () {
    21.       return {
    22.         spinning: false,
    23.         delayTime: 500,
    24.       }
    25.     },
    26.     methods: {
    27.       changeSpinning(){
    28.         this.spinning = !this.spinning
    29.       }
    30.     },
    31.   }
    32. </script>

    Spin加载中 - 图7

    自定义指示符

    使用自定义指示符。

    1. <template>
    2.   <div>
    3.     <a-spin>
    4.       <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
    5.     </a-spin>
    6.     <a-spin :indicator="indicator" />
    7.   </div>
    8. </template>
    9. <script>
    10.   export default {
    11.     data () {
    12.       return {
    13.         indicator: <a-icon type="loading" style="font-size: 24px" spin />
    14.       }
    15.     },
    16.   }
    17. </script>

    API

    参数说明类型默认值
    delay延迟显示加载效果的时间（防止闪烁）number (毫秒)-
    indicator加载指示符vNode | slot-
    size组件大小，可选值为 small default largestring'default'
    spinning是否为加载中状态booleantrue
    tip当作为包裹元素时，可以自定义描述文案string-
    wrapperClassName包装器的类属性string-

    静态方法

    • Spin.setDefaultIndicator({indicator})同上 indicator，你可以自定义全局默认元素
    1. Spin.setDefaultIndicator({
    2.   indicator: (h) => {
    3.     return <i class='anticon anticon-loading anticon-spin ant-spin-dot'></i>
    4.   },
    5. })
    6. 或者
    7. Spin.setDefaultIndicator({
    8.   indicator: {
    9.     render () {
    10.       return <i class='anticon anticon-loading anticon-spin ant-spin-dot'></i>
    11.     },
    12.   },
    13. })