Loading 加载中

介绍

加载图标，用于表示加载中的过渡状态。

加载类型

通过 type 属性设置加载图标类型，支持 spinner flower circle ring wave sound ripple rubik bounce 九种类型，默认为 spinner。

<vd-loading type="flower" />

自定义颜色

通过 color 属性设置加载图标颜色，默认继承父级颜色。

<vd-loading color="#07c160" />

自定义尺寸

通过 size 属性设置加载图标尺寸，默认继承父级颜色。

<vd-loading size="32" />

自定义图标

通过 icon 属性设置加载图标，优先级高于 type。

<vd-loading icon="star" />

提示文本

通过 text 属性设置加载提示文本，与加载图标同行排列。

<vd-loading text="加载中..." />

<vd-loading type="circle">
  <template #text>加载中，请稍候</template>
</vd-loading>

铺满加载

通过 fixed 属性让加载层铺满定位并居中，此时提示文本排列在图标下方。

<vd-loading fixed text="加载中..." />

API

Props

参数	说明	类型	默认值
type	加载类型	LoadingType	'spinner'
size	加载图标大小	string | number	-
color	加载图标颜色	string	-
icon	加载图标名称，同 icon 组件	IconsName	-
text	加载提示文本，为空时不渲染	string	-
fixed	是否铺满定位并居中	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
icon	加载图标
text	加载提示文本