14 changed files with 38 additions and 115 deletions
@ -1,84 +0,0 @@ |
|||||
# skeleton组件 |
|
||||
|
|
||||
### 1.描述 |
|
||||
> 此组件用于加载数据时占位图显示,跟vant-ui骨架屏用法相似,但比vant-ui更灵活 |
|
||||
|
|
||||
|
|
||||
|
|
||||
### 2.用法 |
|
||||
|
|
||||
- 基本用法 |
|
||||
|
|
||||
代码: |
|
||||
```vue |
|
||||
//基本用法 |
|
||||
<skeleton :row="3" animate :loading="loading" > |
|
||||
<view> |
|
||||
content |
|
||||
</view> |
|
||||
</skeleton> |
|
||||
``` |
|
||||
|
|
||||
|
|
||||
- **显示 title ——通过 **title 属性显示title占位图 |
|
||||
|
|
||||
代码: |
|
||||
```vue |
|
||||
//显示 title——通过 title 属性显示title占位图 |
|
||||
<skeleton :row="3" title animate :loading="loading"> |
|
||||
<view> |
|
||||
content |
|
||||
</view> |
|
||||
</skeleton> |
|
||||
``` |
|
||||
|
|
||||
|
|
||||
- 显示头像(上面)——通过avatar=‘top’让头像的占位图上面显示 |
|
||||
|
|
||||
代码: |
|
||||
```vue |
|
||||
<skeleton :avatar="top" avatarAlign="left" :row="3" animate :loading="loading" style="margin-top:24rpx;"> |
|
||||
<view> |
|
||||
content |
|
||||
</view> |
|
||||
</skeleton> |
|
||||
``` |
|
||||
|
|
||||
|
|
||||
- 显示头像(左边)——通过avatar=‘left’让头像的占位图左边显示 |
|
||||
|
|
||||
代码: |
|
||||
```vue |
|
||||
<skeleton title :avatar="left" :row="3" animate :loading="loading" style="margin-top:24rpx;"> |
|
||||
<view> |
|
||||
content |
|
||||
</view> |
|
||||
</skeleton> |
|
||||
``` |
|
||||
|
|
||||
|
|
||||
- 显示banner**——通过 **banner属性显示banner占位图(只显示banner,不显示内容占位图时设置row="0") |
|
||||
|
|
||||
代码: |
|
||||
```vue |
|
||||
<skeleton banner :row="0" animate :loading="loading" style="margin-top:24rpx;"> |
|
||||
<view> |
|
||||
content |
|
||||
</view> |
|
||||
</skeleton> |
|
||||
``` |
|
||||
### |
|
||||
### 3. API |
|
||||
### Props |
|
||||
| **属性名** | **说明** | **类型** | **默认值** | 可取值 | |
|
||||
| --- | --- | --- | --- | --- | |
|
||||
| loading | 是否显示骨架屏 | Boolean | true | true/false | |
|
||||
| row | 段落行数 | Number | String | 3 | 0表示不展现 | |
|
||||
| rowWidth | 段落行宽度 | Boolean | Number | '100%' | | |
|
||||
| title | 是否显示标题 | Boolean | String | false | | |
|
||||
| banner | 是否显示banner | Boolean | String | false | | |
|
||||
| animate | 是否开启动画 | Boolean | String | false | | |
|
||||
| avatar | 头像位置 | Boolean | String | ''空 | left/top | |
|
||||
| avatarSize | 头像大小 | String | - | | |
|
||||
| avatarShape | 头像形状 | String | circle | circle/round | |
|
||||
|
|
||||
Loading…
Reference in new issue