Vant3 Skeleton 骨架屏

介紹

用于在內容加載過程中展示一組占位圖形。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

const app = createApp();
app.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>

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const loading = ref(true);

    onMounted(() => {
      loading.value = false;
    });

    return {
      loading,
    };
  },
};

API

Props

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考ConfigProvider 組件。