Loading 加载中

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

何时使用

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

基本用法

一个简单的 loading 状态。

<template>
  <g-spin />
</template>

各种大小

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

<template>
  <div>
    <g-spin size="small" />
    <g-spin />
    <g-spin size="large" />
  </div>
</template>

容器

放入一个容器中。

<template>
  <div class="example">
    <g-spin>
      <div class="content">
        <p>这里是一些文本。</p>
        <p>这里是一些文本。</p>
        <p>这里是一些文本。</p>
      </div>
    </g-spin>
  </div>
</template>

<style>
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}

.content {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
}
</style>

卡片加载中

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

<template>
  <div>
    <g-spin :spinning="spinning">
      <g-alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    </g-spin>
    <div style="margin-top: 16px;">
      Loading state：
      <g-switch v-model:checked="spinning" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const spinning = ref(false)
    
    return {
      spinning
    }
  }
}
</script>

自定义描述文案

自定义描述文案。

<template>
  <g-spin tip="Loading...">
    <g-alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  </g-spin>
</template>

延迟

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

<template>
  <div>
    <g-spin :spinning="spinning" :delay="500">
      <g-alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    </g-spin>
    <div style="margin-top: 16px;">
      Loading state：
      <g-switch v-model:checked="spinning" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const spinning = ref(false)
    
    return {
      spinning
    }
  }
}
</script>

自定义指示符

使用自定义指示符。

<template>
  <div>
    <g-spin>
      <template #indicator>
        <g-icon type="loading" style="font-size: 24px;" spin />
      </template>
    </g-spin>
    
    <div style="margin-top: 20px;">
      <g-spin>
        <template #indicator>
          <g-icon type="smile" style="font-size: 24px;" spin />
        </template>
        <div class="content">
          <p>这里是一些文本。</p>
          <p>这里是一些文本。</p>
          <p>这里是一些文本。</p>
        </div>
      </g-spin>
    </div>
  </div>
</template>

<style>
.content {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 24px;
}
</style>

全局化配置

Spin 拥有全局化配置。

<template>
  <g-spin>
    <div class="content">
      <p>这里是一些文本。</p>
      <p>这里是一些文本。</p>
      <p>这里是一些文本。</p>
    </div>
  </g-spin>
</template>

<script>
import { Spin } from '@/components'

// 全局配置
Spin.setDefaultIndicator({
  indicator: h => {
    return h('i', { class: 'anticon anticon-loading anticon-spin ant-spin-dot' })
  }
})

export default {
  // ...
}
</script>

API

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

静态方法

• Spin.setDefaultIndicator(indicator) 同上 indicator，你可以自定义全局默认元素

import { h } from 'vue';

Spin.setDefaultIndicator({
  indicator: h('i', { class: 'anticon anticon-loading anticon-spin ant-spin-dot' }),
});