Loading 加载

基本类型

<vz-loading name="circular"></vz-loading>

<vz-loading name="spinner"></vz-loading>

图标颜色

<vz-loading color="var(--vz-color-primary)"></vz-loading>

图标大小

<vz-loading size="80rpx" line-width="3px"></vz-loading>

加载文案

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

垂直排列

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

文本颜色

<vz-loading text="加载中..." text-color="var(--vz-color-primary)"></vz-loading>

自定义图标

<vz-loading name="iconfont icon-home"></vz-loading>

自定义步数

<vz-loading name="iconfont icon-home" steps="4"></vz-loading>

Props

属性名	说明	类型	默认值
name	图标类型，可以为 vz-icon 的 name 值	circular / spinner / icon	circular
color	图标和文案颜色	string	inherit
size	图标大小	string / number	inherit
line-width	调节图标线条粗细， 仅 circular 和 spinner 类型可用	string / number
duration	图标旋转一圈所用时间	string	1.2s
steps	图标转一圈的步数，spinner 类型默认 12，其他类型默认 linear 线性旋转	number / string	-
text	加载文案	string	-
text-color	字体颜色	string	inherit
text-size	字体大小	string / number	inherit
gap	图标与文字之间的间距	string / number	--vz-gap-base
vertical	图标和文字是否垂直排列	boolean	false
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Events

事件名	说明	参数
click	点击事件	-

CSS

变量名	说明	默认值
--vz-loading-color	props.color	inherit
--vz-loading-size	props.size	inherit
--vz-loading-line-width	props.lineWidth	1px
--vz-loading-animation-duration	props.duration	1.2s
--vz-loading-animation-steps	props.steps	-
--vz-loading-text-color	props.textColor	inherit
--vz-loading-text-size	props.textSize	inherit
--vz-loading-gap	props.gap	--vz-gap-base

SCSS

$loading: (
  "line-width": 1px,
  "duration": 1.2s,
  "gap": var(--vz-gap-base),
);