Skeleton 骨架屏

引入

import Vue from 'vue';
import { Skeleton } from 'vant';
Vue.use(Skeleton);

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数

<van-skeleton title :row="3" />

显示头像

通过avatar属性显示头像占位图

<van-skeleton title avatar :row="3" />

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件

<van-skeleton title avatar :row="3" :loading="loading">
  <div>实际内容</div>
</van-skeleton>

export default {
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    this.loading = false;
  },
};

API

Props