component can be used to scaffold a loading state, while your data is loading.">component can be used to scaffold a loading state, while your data is loading.">
报告问题编辑此页面

骨架

<b-skeleton> 是一个 BootstrapVue 自定义组件，它允许你在获取或计算数据时为多种组件类型显示加载状态。

自 v2.17.0 起在 BootstrapVue 中可用

示例：基本用法

<template>
  <div>
    <div class="d-flex align-items-center mb-3">
      <b-progress class="w-100" :max="maxLoadingTime" height="1.5rem">
        <b-progress-bar :value="loadingTime" :label="`${((loadingTime / maxLoadingTime) * 100).toFixed(2)}%`"></b-progress-bar>
      </b-progress>

      <b-button class="ml-3" @click="startLoading()">Reload</b-button>
    </div>

    <b-skeleton-wrapper :loading="loading">
      <template #loading>
        <b-card>
          <b-skeleton width="85%"></b-skeleton>
          <b-skeleton width="55%"></b-skeleton>
          <b-skeleton width="70%"></b-skeleton>
        </b-card>
      </template>

      <b-card>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
        non rhoncus elit tincidunt vitae. Vestibulum maximus, ligula eu feugiat molestie,
        massa diam imperdiet odio, vitae viverra ligula est id nisi. Aliquam ut molestie est.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
        turpis egestas. Phasellus at consequat dui. Aenean tristique sagittis quam,
        sit amet sollicitudin neque sodales in.
      </b-card>
    </b-skeleton-wrapper>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        loadingTime: 0,
        maxLoadingTime: 3
      }
    },
    watch: {
      loading(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.clearLoadingTimeInterval()

          if (newValue) {
            this.$_loadingTimeInterval = setInterval(() => {
              this.loadingTime++
            }, 1000)
          }
        }
      },
      loadingTime(newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue === this.maxLoadingTime) {
            this.loading = false
          }
        }
      }
    },
    created() {
      this.$_loadingTimeInterval = null
    },
    mounted() {
      this.startLoading()
    },
    methods: {
      clearLoadingTimeInterval() {
        clearInterval(this.$_loadingTimeInterval)
        this.$_loadingTimeInterval = null
      },
      startLoading() {
        this.loading = true
        this.loadingTime = 0
      }
    }
  }
</script>

<!-- b-skeleton.vue -->

类型

<b-skeleton> 支持多种基本类型，以表示项目中的各种组件。

<h5>Text (default)</h5>
<b-skeleton></b-skeleton>

<h5 class="mt-3">Avatar</h5>
<b-skeleton type="avatar"></b-skeleton>

<h5 class="mt-3">Input</h5>
<b-skeleton type="input"></b-skeleton>

<h5 class="mt-3">Button</h5>
<b-skeleton type="button"></b-skeleton>

<!-- b-skeleton-types.vue -->

骨架动画

<b-skeleton> 支持不同的动画。你可以为每个组件设置动画，或在 设置 中全局更改动画。

<h5>Wave (default)</h5>
<b-card>
  <b-skeleton animation="wave" width="85%"></b-skeleton>
  <b-skeleton animation="wave" width="55%"></b-skeleton>
  <b-skeleton animation="wave" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">Fade</h5>
<b-card>
  <b-skeleton animation="fade" width="85%"></b-skeleton>
  <b-skeleton animation="fade" width="55%"></b-skeleton>
  <b-skeleton animation="fade" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">Throb</h5>
<b-card>
  <b-skeleton animation="throb" width="85%"></b-skeleton>
  <b-skeleton animation="throb" width="55%"></b-skeleton>
  <b-skeleton animation="throb" width="70%"></b-skeleton>
</b-card>

<h5 class="mt-3">None</h5>
<b-card>
  <b-skeleton animation width="85%"></b-skeleton>
  <b-skeleton animation width="55%"></b-skeleton>
  <b-skeleton animation width="70%"></b-skeleton>
</b-card>

<!-- b-skeleton-animations.vue -->

辅助组件

利用 <b-skeleton> 辅助组件快速构建现有组件。

表格

<b-skeleton-table> 允许你通过利用 rows 和 columns 属性来定义表格大小，从而构建一个基本的表格结构。你可以通过 table-props 属性直接将属性传递给表格，该属性支持与 <b-table-simple> 相同的属性。有关完整列表，请参阅 <b-table-simple> 文档。

<b-skeleton-table
  :rows="5"
  :columns="4"
  :table-props="{ bordered: true, striped: true }"
></b-skeleton-table>

<!-- b-skeleton-helper-table.vue -->

图像

使用 <b-skeleton-img> 来表示图像。默认情况下，它使用 16:9 的纵横比，以实现响应式大小调整。你可以通过应用 no-aspect 并利用 height 和 width 属性来设置自己的大小，从而覆盖此设置。

<b-row>
  <b-col>
    <b-skeleton-img></b-skeleton-img>
  </b-col>
  <b-col>
    <b-skeleton-img></b-skeleton-img>
  </b-col>
  <b-col cols="12" class="mt-3">
    <b-skeleton-img no-aspect height="150px"></b-skeleton-img>
  </b-col>
</b-row>

<!-- b-skeleton-helper-img.vue -->

卡片图像

在 <b-card> 中使用 <b-skeleton-img> 来表示图像。请记住将 card-img 属性设置为图像的位置。这将应用适当的边框半径。

<b-row>
  <b-col cols="12" md="6">
    <h5>Image top</h5>
    <b-card no-body img-top>
      <b-skeleton-img card-img="top" aspect="3:1"></b-skeleton-img>
      <b-card-body>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra nunc sapien,
        non rhoncus elit tincidunt vitae.
      </b-card-body>
    </b-card>
  </b-col>
  <b-col cols="12" md="6">
    <h5>Image bottom</h5>
    <b-card no-body img-bottom>
      <b-card-body>
        Vestibulum maximus, ligula eu feugiat molestie, massa diam imperdiet odio, vitae viverra
        ligula est id nisi. Aliquam ut molestie est.
      </b-card-body>
      <b-skeleton-img card-img="bottom" aspect="3:1"></b-skeleton-img>
    </b-card>
  </b-col>
</b-row>

<b-row class="mt-md-3">
  <b-col cols="12" md="6">
    <h5>Image left</h5>
    <b-card no-body img-left>
      <b-skeleton-img card-img="left" width="225px"></b-skeleton-img>
      <b-card-body>
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Phasellus at consequat dui.
      </b-card-body>
    </b-card>
  </b-col>
  <b-col cols="12" md="6">
    <h5>Image right</h5>
    <b-card no-body img-right>
      <b-skeleton-img card-img="right" width="225px"></b-skeleton-img>
      <b-card-body>
        Aenean tristique sagittis quam, sit amet sollicitudin neque sodales in.
      </b-card-body>
    </b-card>
  </b-col>
</b-row>

<!-- b-skeleton-helper-card-img.vue -->

图标

<b-skeleton-icon> 也可以用作图标的占位符。如果你需要使用任何图标属性，可以通过 icon-props 属性传递它们。

<b-skeleton-icon
  icon="person"
  :icon-props="{ fontScale: 2 }"
></b-skeleton-icon>

<b-skeleton-icon
  icon="person-fill"
  :icon-props="{ fontScale: 2, variant: 'dark' }"
></b-skeleton-icon>

<!-- b-skeleton-helper-card-icon.vue -->

注意： throb 动画不适用于 b-skeleton-icon。

样式和自定义

<b-skeleton> 组件和辅助组件尽可能利用 Bootstrap SCSS 变量，以最佳匹配本机组件的样式和大小。这意味着如果你自定义了 Bootstrap SCSS，骨架组件应适应你的自定义主题。

我们还提供了一些自定义 SCSS 变量，这些变量可用于进一步自定义各种 <b-skeleton> 组件的样式。您可以在 主题部分 中阅读有关如何更改这些变量的更多信息。

组件参考

<b-skeleton>

功能组件
查看源代码

属性

所有属性的默认值均可 全局配置。

属性
类型
默认值
说明
animation
字符串'wave'更改组件动画，留空或 `null` 以禁用动画
height
字符串设置组件的 `height`
size
字符串设置组件的 `width` 和 `height`
type
字符串'text'更改类型，请参阅 [类型](/#types) 部分
variant
字符串将 Bootstrap 主题颜色变体之一应用于组件
width
字符串设置组件的 `width`

<b-skeleton-wrapper>

功能组件
查看源代码

属性

所有属性的默认值均可 全局配置。

属性
类型
默认值
说明
loading
布尔值false确定是否应显示加载插槽

插槽

名称
说明
default 当 `loading` 属性为 `false` 时显示的内容
loading 当 `loading` 属性为 `true` 时显示的内容

<b-skeleton-table>

功能组件
查看源代码

属性

所有属性的默认值均可 全局配置。

属性
类型
默认值
说明
animation
字符串每个单元格中组件使用的动画，留空或 `null` 以禁用动画
columns
数字5要显示的列数
hide-header
布尔值false隐藏表格标题
rows
数字3要显示的行数
show-footer
布尔值false启用表格页脚
table-props
对象{}支持与 `<b-table-simple>` 相同的属性

<b-skeleton-img>

功能组件
查看源代码

属性

所有属性的默认值均可 全局配置。

属性
类型
默认值
说明
animation
字符串组件使用的动画，留空或 `null` 以禁用动画
aspect
字符串'16:9'控制图像的纵横比
card-img
字符串如果用作卡片图像，请使用此属性设置位置。可接受的值为 `top`、`bottom`、`left` 和 `right`
height
字符串设置图像的高度。最好与 `no-aspect` 设置为 `true` 一起使用
no-aspect
布尔值false移除骨架周围的纵横比包装器
variant
字符串将 Bootstrap 主题颜色变体之一应用于组件
width
字符串设置图像的宽度。最好与 `no-aspect` 设置为 `true` 一起使用

<b-skeleton-icon>

功能组件
查看源代码

属性

所有属性的默认值均可 全局配置。

属性
类型
默认值
说明
animation
字符串'wave'组件使用的动画，留空或 `null` 以禁用动画
icon
字符串要显示的图标
icon-props
对象{}要传递给图标的属性。请参阅 `<b-icon>` 属性引用

导入单个组件

您可以通过以下命名导出将单个组件导入到您的项目中

组件
命名导出
导入路径
<b-skeleton>BSkeletonbootstrap-vue
<b-skeleton-wrapper>BSkeletonWrapperbootstrap-vue
<b-skeleton-table>BSkeletonTablebootstrap-vue
<b-skeleton-img>BSkeletonImgbootstrap-vue
<b-skeleton-icon>BSkeletonIconbootstrap-vue

示例

import { BSkeleton } from 'bootstrap-vue'
Vue.component('b-skeleton', BSkeleton)

作为 Vue.js 插件导入

此插件包含上述所有列出的各个组件。插件还包括任何组件别名。

命名导出
导入路径
SkeletonPluginbootstrap-vue

示例

import { SkeletonPlugin } from 'bootstrap-vue'
Vue.use(SkeletonPlugin)