Skeleton 骨架屏

在需要等待載入內容的位置設定一個骨架屏，在某些場景下比 Loading 的視覺效果更好。

基礎使用

基礎的骨架效果。

<!-- 預設骨架屏 -->
<rdn-skeleton :rows="10"/>

<rdn-skeleton>
  <template #template>
    <rdn-skeleton-item variant="circle"/>
  </template>
</rdn-skeleton>

動畫效果

我們提供了一個開關標誌，表明是否顯示載入動畫， 呼叫 animated 如果真是這樣，所有的 rdn-skeleton 的子節點將顯示動畫。

<!-- 帶動畫 -->
<rdn-skeleton animated/>

<rdn-skeleton animated :loading="true">
  <template #template>
    <rdn-skeleton-item variant="circle"/>
  </template>
</rdn-skeleton>

載入狀態

當 Loading 結束之後，我們往往需要顯示真實的 UI， 可以透過 loading 屬性的值來控制是否顯示載入後的 DOM。 也可以透過具名插槽 default 來建構 loading 結束之後需要展示的真實 DOM 元素結構。

<!-- 加載完成後顯示 slot -->
<rdn-skeleton :loading="isLoading">
  <div>真實內容</div>
</rdn-skeleton>

import {ref} from "vue";
const isLoading = ref(true);
setTimeout(() => {isLoading.value = false},3000)

Tag API

Tag Attributes