Vant Skeleton 骨架屏

引入

import Vue from 'vue';
import { Skeleton } from 'vant';

Vue.use(Skeleton);

代碼演示

基礎用法

通過title屬性顯示標題占位圖，通過row屬性配置占位段落行數(shù)

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

顯示頭像

通過avatar屬性顯示頭像占位圖

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

展示子組件

將loading屬性設置成false表示內(nèi)容加載完成，此時會隱藏占位圖，并顯示Skeleton的子組件

<van-skeleton
  title
  avatar
  :row="3"
  :loading="loading"
>
  <div>實際內(nèi)容</div>
</van-skeleton>

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

API

Props