2020-08-13 11:47:56 +08:00
|
|
|
# Loading <small>加载</small>
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
### 风格
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
可选的风格 [`ui`](#props-ui) 属性值：`normal` / `strong` / `reverse`。
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/style.vue"]]
|
|
|
|
|
|
|
|
|
|
### 尺寸
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
可选的尺寸 [`ui`](#props-ui) 属性值：`s` / `m` / `l`。
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/size.vue"]]
|
|
|
|
|
|
|
|
|
|
### 排列方式
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
可选的排列方式 [`ui`](#props-ui) 属性值：`vertical`。
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/layout.vue"]]
|
|
|
|
|
|
|
|
|
|
### 自定义加载图标
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
通过 [`spinner`](#slots-spinner) 插槽设置自定义加载图标。
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/slot.vue"]]
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
2022-03-24 18:40:01 +08:00
|
|
|
### 属性
|
|
|
|
|
|
2020-08-13 11:47:56 +08:00
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``ui`` | `string=` | - | [^ui] |
|
|
|
|
|
| ``loading`` | `boolean` | `false` | 是否处于加载状态。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
^^^ui
|
|
|
|
|
预设样式。为空格分隔的一组枚举值的组合。
|
|
|
|
|
|
|
|
|
|
+++枚举值
|
|
|
|
|
| 值 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `strong` | 加强样式。 |
|
|
|
|
|
| `reverse` | 反白样式，用于深色背景。 |
|
|
|
|
|
| `vertical` | 垂直排列样式。|
|
|
|
|
|
| `s` | 小尺寸样式。 |
|
|
|
|
|
| `m` | 中尺寸样式。 |
|
|
|
|
|
| `l` | 大尺寸样式。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``spinner`` | 加载图标。 |
|
|
|
|
|
| ``default`` | 加载中提示文字。 |
|
