• 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

    自定义描述文案

    自定义描述文案。

    <style scoped>
      .spin-content {
        border: 1px solid #91d5ff;
        background-color: #e6f7ff;
        padding: 30px;
      }
    </style>
    <template>
      <div>
        <a-spin tip="Loading...">
          <div class="spin-content">
            我的描述文案是自定义的。。。
          </div>
        </a-spin>
      </div>
    </template>
    

    Spin 加载中 - 图6

    延迟

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

    <style scoped>
      .spin-content {
        border: 1px solid #91d5ff;
        background-color: #e6f7ff;
        padding: 30px;
      }
    </style>
    <template>
      <div>
        <a-spin :spinning="spinning" :delay="delayTime">
          <div class="spin-content">
            可以点击‘切换’按钮,延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束,则不显示
            loading 状态。
          </div>
        </a-spin>
        Loading state:<a-switch v-model="spinning"></a-switch>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            spinning: false,
            delayTime: 500,
          };
        },
        methods: {
          changeSpinning() {
            this.spinning = !this.spinning;
          },
        },
      };
    </script>
    

    Spin 加载中 - 图7

    自定义指示符

    使用自定义指示符。

    <template>
      <div>
        <a-spin>
          <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
        </a-spin>
        <a-spin :indicator="indicator" />
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            indicator: <a-icon type="loading" style="font-size: 24px" spin />,
          };
        },
      };
    </script>
    

    API

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

    静态方法

    • Spin.setDefaultIndicator({indicator}) 同上 indicator,你可以自定义全局默认元素
    Spin.setDefaultIndicator({
      indicator: h => {
        return <i class="anticon anticon-loading anticon-spin ant-spin-dot"></i>;
      },
    });
    或者;
    Spin.setDefaultIndicator({
      indicator: {
        render() {
          return <i class="anticon anticon-loading anticon-spin ant-spin-dot"></i>;
        },
      },
    });