Vant Skeleton skeleton screen

Introduced

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

Vue.use(Skeleton);

Code demo

Basic usage

The title placemap is displayed through the title property, and the number of placeholder paragraph lines is configured by the row property

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

Show the avatar

The avatar placemap is displayed through the avatar property

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

Show sub-components

Setting the loading property to false indicates that the content is loaded, where the placemap is hidden and Skeleton's sub-components are displayed

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

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

Api

Props