Skip to content

Loading 加载指示器

基本用法

基本用法,适用于按钮加载状态和页面轻提示。

html
<wd-loading />

修改指示器类型

通过 type 修改指示器的类型,可选值为 'outline',适用于通用模块加载。

html
<wd-loading type="outline" />

修改颜色

通过 color 属性修改指示器的颜色。比如修改为白色,同时设置背景为黑色。

WARNING

小程序中没有 svg 标签,所以是先通过js生成svg标签,再转换成 base64,因此设置指示器颜色必须为16进制色值,且不接受色值缩写。

html
<wd-loading color="#ffffff" custom-class="loading-black" />

<!-- 以下为错误写法 -->
<wd-loading color="#fff" />
<wd-loading color="green" />
<wd-loading color="rgba(255,255,255,1)" />
scss
:deep(.loading-black) {
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 4px;
}

修改指示器大小

通过 size 属性设置指示器的大小,默认为大小 '32px',属性支持 number/string 类型。

html
<wd-loading :size="20" />
<wd-loading :size="30" />
<wd-loading size="50px" />

Attributes

参数说明类型可选值默认值最低版本
type加载指示器类型stringoutlinering-
color设置加载指示器颜色string-#4D80F0-
size设置加载指示器大小number / string-32px-

外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.