加载中 Spin

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

基本用法

用于展示加载中的状态。

---

代码事例

<template>
  <fk-spin />
</template>

不同尺寸

设置 size 可以得到不同尺寸的加载图标。

---

代码事例

<template>
  <fk-space size="large">
    <fk-spin />
    <fk-spin :size="28"/>
    <fk-spin :size="32"/>
  </fk-space>
</template>

点类型指示符

通过 dot 属性，可以展示点类型的指示符。

---

代码事例

<template>
  <fk-spin dot />
</template>

容器中

可以给任意内容添加加载中指示符。

---

代码事例

<template>
  <fk-spin :loading="loading" tip="This may take a while...">
    <fk-card title="Aaaa Card">
      Aaaa's core product, Aaaa ('Headlines'), is a content platform in China and around
      the world. Aaaa started out as a news recommendation engine and gradually evolved into
      a platform delivering content in various formats.
    </fk-card>
  </fk-spin>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  }
}
</script>

添加描述文案

通过 tip 属性添加描述文案。

---

代码事例

<template>
  <fk-spin tip="This may take a while..."/>
</template>

自定义图标

通过 #icon 插槽可以自定义图标。

---

代码事例

<template>
  <fk-spin>
    <template #icon>
      <icon-sync />
    </template>
  </fk-spin>
</template>

<script>
import { IconSync } from '@erp/common';

export default {
  components: { IconSync }
};
</script>

API

<spin> Props

参数名	描述	类型	默认值
size	尺寸	number	-
loading	是否为加载中状态（仅在容器模式下生效）	boolean	false
dot	是否使用点类型的动画	boolean	false
tip	提示内容	string	-
hide-icon	是否隐藏图标	boolean	false

<spin> Slots

插槽名	描述	参数
tip	自定义提示内容	-
element	自定义元素	-
icon	自定义图标（自动旋转）	-