Loading 加载中

用于显示正在加载状态的组件。

基本用法

<template>
  <i-loading />
</template>

显示代码复制代码复制代码

旋转提示

可通过默认插槽设置旋转提示：

加载中

<template>
  <i-loading>加载中</i-loading>
</template>

显示代码复制代码复制代码

自定义旋转图标

可通过 icon 属性自定义图标，点击查看可选图标：

<template>
  <div className="idesign-demo-block-row">
    <i-loading icon="RefreshRight" />
    <i-loading icon="SettingFill" />
  </div>
</template>

显示代码复制代码复制代码

自定义旋转图标大小

可通过 size 属性自定义图标：

<template>
  <div className="idesign-demo-block-row">
    <i-loading :size="16" />
    <i-loading :size="32" />
    <i-loading :size="48" />
  </div>
</template>

显示代码复制代码复制代码

自定义旋转图标颜色

可通过 color 属性自定义图标：

<template>
  <div className="idesign-demo-block-row">
    <i-loading color="#E06B67" />
    <i-loading color="#DBA049" />
    <i-loading color="#7EBF50" />
  </div>
</template>

显示代码复制代码复制代码

自定义旋转内容

可通过 spinner 插槽自定义旋转内容：

🌞

※

<template>
  <div className="idesign-demo-block-row">
    <i-loading>
      <template #spinner>🌞</template>
    </i-loading>
    <i-loading>
      <template #spinner>
        <span>※</span>
      </template>
    </i-loading>
  </div>
</template>

显示代码复制代码复制代码

Loading Attributes

属性	说明	类型	默认值
icon	加载图标	string	Loading
size	加载图标大小	number	36
color	加载图标颜色	string	--

Loading Slots

插槽名	说明
spinner	自定义旋转内容