import Vue from 'vue';
import { Skeleton } from 'vant';
Vue.use(Skeleton);
<van-skeleton title :row="3" />
<van-skeleton title avatar :row="3" />
<van-skeleton
title
avatar
:row="3"
:loading="loading"
>
<div>Content</div>
</van-skeleton>
export default {
data() {
return {
loading: true
}
},
mounted() {
this.loading = false;
}
};
| Attribute |
Description |
Type |
Default |
Version |
| row |
Row count |
number |
0 |
- |
| row-width |
Row width, can be array |
number | string | number[] | string[] |
100% |
- |
| title |
Whether to show title placeholder |
boolean |
false |
- |
| title-width |
Title width |
string | number |
40% |
- |
| avatar |
Whether to show avatar placeholder |
boolean |
false |
- |
| avatar-size |
Size of avatar placeholder |
string | number |
32px |
- |
| avatar-shape |
Shape of avatar placeholder,can be set to square |
string |
round |
- |
| loading |
Whether to show skeleton,pass false to show child component |
boolean |
true |
- |
| animate |
Whether to enable animation |
boolean |
true |
- |