69 lines
1.6 KiB
Markdown
69 lines
1.6 KiB
Markdown
# 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 | 加载指示器类型 | string | outline | ring | - |
|
||
| color | 设置加载指示器颜色 | string | - | #4D80F0 | - |
|
||
| size | 设置加载指示器大小 | number / string | - | 32px | - |
|
||
|
||
## 外部样式类
|
||
|
||
| 类名 | 说明 | 最低版本 |
|
||
|-----|------|--------|
|
||
| custom-class | 根节点样式 | - |
|