加载

介绍

加载组件通常会和toast或者按钮搭配使用。值得一提的是,我们也为加载组件内置了一些样式模板,总有一款适合你。

基本使用

<z-loading />

加载类型

通过指定属性type,可以指定加载的类型。抱歉的是目前只有两种类型可用,我们后续会加入更多类型供大家使用。

<z-loading type="spinner" />

自定义颜色

通过指定属性color,可以设置加载组件的颜色。

<z-loading color="#1989fa" />

自定义大小

通过指定属性size,可以设置加载组件的大小,默认单位为rpx。

<z-loading size="48" />

加载文案

你也可以在加载中自定义文字,设置的文字会和加载组件一起显示。

<z-loading size="48">
	加载中...
</z-loading>

垂直排列

当你设置了加载文字后,你会发现你所设置的文字会默认显示在右边。这时候可以通过vertical属性,将你设置的文字放置在下方。

<z-loading size="48" vertical>
	加载中...
</z-loading>

自定义文本颜色

我们知道,改变组件的颜色只需要设置color即可,但是当我们设置了文字后,我们会发现文字的颜色也发生了改变。这时候我们可以通过text-color属性来设置文字颜色。

<z-loading size="48" vertical text-color="#0094ff">
	加载中...
</z-loading>

使用加载模板

前面我们提到,加载组件预置了很多模板。我们只需要设置template属性为a b c d e f 中的一个,即可使用加载组件的模板。

<z-loading template="f"></z-loading>

Props

参数 说明 类型 可选值 默认值
type 加载类型 string circular spinner circular
color 加载组件的颜色 string #c9c9c9
size 加载图标大小,默认单位为 rpx string 40rpx
text-size 文字大小,默认单位为为 rpx string 28rpx
text-color 文字颜色 string -
vertical 是否垂直排列图标和文字内容 boolean false
custom-style 自定义样式 object -
template 加载模板 string a b c d e f -

Slots

名称 说明 Bindings
default 默认插槽