lb-vue-ui

Appearance

Skeleton 骨架屏 ​

骨架屏组件，用于在内容加载时提供占位符。

何时使用 ​

当页面或区块内容正在加载时，显示一个占位符，提升用户体验。

代码示例 ​

基础用法 ​

通过 loading 属性控制骨架屏的显示与隐藏。

<template>
  <lb-skeleton :loading="loading">
    <template #template>
      <lb-skeleton-item variant="text" style="width: 50%"></lb-skeleton-item>
      <lb-skeleton-item variant="text" style="width: 80%"></lb-skeleton-item>
    </template>
    <template #default>
      <div>
        <h3>内容已加载</h3>
        <p>这是加载完成后的内容。</p>
      </div>
    </template>
  </lb-skeleton>
  <lb-button @click="toggleLoading" style="margin-top: 20px">切换加载状态</lb-button>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(true)

const toggleLoading = () => {
  loading.value = !loading.value
}
</script>

动画效果 ​

通过 animated 属性开启骨架屏的动画效果。

<template>
  <lb-skeleton animated :loading="true">
    <template #template>
      <lb-skeleton-item variant="circle"></lb-skeleton-item>
      <lb-skeleton-item variant="text" style="width: 60%;"></lb-skeleton-item>
      <lb-skeleton-item variant="text"></lb-skeleton-item>
    </template>
  </lb-skeleton>
</template>

自定义行数和数量 ​

通过 rows 和 count 属性控制骨架屏的行数和数量。

<template>
  <lb-skeleton :rows="3" :count="2" :loading="loading" animated>
    <template #template>
      <div style="display: flex; align-items: center; gap: 10px">
        <lb-skeleton-item variant="image" />
        <div style="flex: 1; display: flex; flex-direction: column">
          <lb-skeleton-item variant="text" style="width: 13%" />
          <lb-skeleton-item variant="text" style="width: 33%" />
        </div>
      </div>
      <lb-skeleton-item variant="text" style="width: 50%" />
      <lb-skeleton-item variant="text" />
    </template>
    <template #default>
      <div style="display: flex; flex-direction: column">
        <div style="display: flex; gap: 10px; align-items: center">
          <img
            src="https://ts1.tc.mm.bing.net/th/id/R-C.6f18e58bf3bacbcee226cb76dfc089a3?rik=61%2bMLnhOzFiZOg&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2014%2f07%2f085628m6c.jpg&ehk=v1vDvzVgPRc3irw6n%2bs5gF%2b5SEc1uCstErDhRaxqlgE%3d&risl=&pid=ImgRaw&r=0"
            style="width: 120px; height: 100px"
            alt=""
          />
          <div>
            <p>左边是一束樱花</p>
            <p>真的很漂亮欸~~~~~</p>
          </div>
        </div>
        <p>这是加载完成后的内容。</p>
      </div>
      <div style="display: flex; flex-direction: column">
        <div style="display: flex; gap: 10px; align-items: center">
          <img
            src="https://pic1.zhimg.com/v2-a58fa2ab84be291418da2652805f8270_b.jpg"
            style="width: 120px; height: 100px"
            alt=""
          />
          <div>
            <p>左边是两只狐狸</p>
            <p>真的很可爱欸~~~~~</p>
          </div>
        </div>
        <p>这是加载完成后的内容。</p>
      </div>
    </template>
  </lb-skeleton>
  <lb-button @click="toggleLoading">切换加载状态</lb-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const loading = ref(true)

const toggleLoading = () => {
  loading.value = !loading.value
}
</script>

<style scoped lang="scss">
p {
  margin: 3px;
}
</style>

LbSkeleton Props ​

属性名说明类型可选值默认值
animated是否开启动画booleantrue | falsefalse
rows骨架屏段落的行数number-0
count骨架屏的数量number-1
loading是否显示骨架屏booleantrue | falsetrue
throttle延迟显示骨架屏的时间 (ms)number-0
duration动画持续时间 (s)number-1.5
variant骨架屏的变体类型 (仅在无插槽时生效)stringtext | circle | rect | image | buttontext

LbSkeleton Slots ​

插槽名说明
default加载完成后的内容
template骨架屏模板内容

LbSkeletonItem Props ​

属性名说明类型可选值默认值
variant骨架屏元素的变体类型stringtext | circle | rect | image | buttontext