报告问题编辑此页面

进度

使用我们自定义的进度组件显示简单或复杂的进度条，支持水平堆叠条、动画背景和文本标签。

<template>
  <div>
    <b-progress :value="value" :max="max" show-progress animated></b-progress>
    <b-progress class="mt-2" :max="max" show-value>
      <b-progress-bar :value="value * (6 / 10)" variant="success"></b-progress-bar>
      <b-progress-bar :value="value * (2.5 / 10)" variant="warning"></b-progress-bar>
      <b-progress-bar :value="value * (1.5 / 10)" variant="danger"></b-progress-bar>
    </b-progress>

    <b-button class="mt-3" @click="randomValue">Click me</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 45,
        max: 100
      }
    },
    methods: {
      randomValue() {
        this.value = Math.random() * this.max
      }
    }
  }
</script>

<!-- b-progress.vue -->

值

使用 max 属性设置最大值（默认值为 100），并通过 value 属性设置当前值（默认值为 0）。

在单个进程中创建多个条时，将 value 属性放在各个 <b-progress-bar> 子组件上（有关更多详细信息，请参见下面的多个条部分）

标签

通过启用 show-progress（最大值的百分比）或 show-value（当前绝对值）为进度条添加标签。您还可以通过 precision 属性设置精度（小数点后的位数）（默认是小数点后 0 位）。

<template>
  <div>
    <h5>No label</h5>
    <b-progress :value="value" :max="max" class="mb-3"></b-progress>

    <h5>Value label</h5>
    <b-progress :value="value" :max="max" show-value class="mb-3"></b-progress>

    <h5>Progress label</h5>
    <b-progress :value="value" :max="max" show-progress class="mb-3"></b-progress>

    <h5>Value label with precision</h5>
    <b-progress :value="value" :max="max" :precision="2" show-value class="mb-3"></b-progress>

    <h5>Progress label with precision</h5>
    <b-progress :value="value" :max="max" :precision="2" show-progress class="mb-3"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50
      }
    }
  }
</script>

<!-- b-progress-labels.vue -->

自定义进度标签

需要对标签进行更多控制？通过在 <b-progress-bar> 子组件中使用默认插槽或在 <b-progress-bar> 上使用 label 或 label-html 属性来提供您自己的标签。

<template>
  <div>
    <h5>Custom label via default slot</h5>
    <b-progress :max="max" height="2rem">
      <b-progress-bar :value="value">
        <span>Progress: <strong>{{ value.toFixed(2) }} / {{ max }}</strong></span>
      </b-progress-bar>
    </b-progress>

    <h5 class="mt-3">Custom label via property</h5>
    <b-progress :max="max">
      <b-progress-bar :value="value" :label="`${((value / max) * 100).toFixed(2)}%`"></b-progress-bar>
    </b-progress>

    <h5 class="mt-3">Custom label via property (HTML support)</h5>
    <b-progress :max="max">
      <b-progress-bar :value="value" :label-html="`<del>${value}</del>`"></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 33.333333333,
        max: 50
      }
    }
  }
</script>

<!-- b-progress-custom-labels.vue -->

标签方法的优先级顺序（最上面的优先级最高）

  • <b-progress-bar> 的默认插槽
  • <b-progress-bar> 的 label 属性
  • <b-progress-bar> 的 show-progress 属性
  • <b-progress-bar> 的 show-value 属性
  • <b-progress> 的 show-progress 属性
  • <b-progress> 的 show-value 属性
  • 无标签

宽度和高度

<b-progress> 将始终扩展到其父容器的最大宽度。要更改宽度，请将 <b-progress> 放置在标准 Bootstrap 列中或应用标准 Bootstrap 宽度类之一。

<template>
  <div>
    <h5>Default width</h5>
    <b-progress :value="value" class="mb-3"></b-progress>

    <h5>Custom widths</h5>
    <b-progress :value="value" class="w-75 mb-2"></b-progress>
    <b-progress :value="value" class="w-50 mb-2"></b-progress>
    <b-progress :value="value" class="w-25"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75
      }
    }
  }
</script>

<!-- b-progress-width.vue -->

进度条的高度可以使用 height 属性进行控制。高度值应为标准 CSS 维度（px、rem、em 等）。默认高度为 1rem。

<template>
  <div>
    <h5>Default height</h5>
    <b-progress :value="value" show-progress class="mb-3"></b-progress>

    <h5>Custom heights</h5>
    <b-progress height="2rem" :value="value" show-progress class="mb-2"></b-progress>
    <b-progress height="20px" :value="value" show-progress class="mb-2"></b-progress>
    <b-progress height="2px" :value="value"></b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 75
      }
    }
  }
</script>

<!-- b-progress-height.vue -->

背景

使用背景变体来更改各个进度条的外观。默认变体为 primary。

纯色背景变体

<template>
  <div>
    <div v-for="bar in bars" class="row mb-1">
      <div class="col-sm-2">{{ bar.variant }}:</div>
      <div class="col-sm-10 pt-1">
        <b-progress :value="bar.value" :variant="bar.variant" :key="bar.variant"></b-progress>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        bars: [
          { variant: 'success', value: 75 },
          { variant: 'info', value: 75 },
          { variant: 'warning', value: 75 },
          { variant: 'danger', value: 75 },
          { variant: 'primary', value: 75 },
          { variant: 'secondary', value: 75 },
          { variant: 'dark', value: 75 }
        ],
        timer: null
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.bars.forEach(bar => (bar.value = 25 + Math.random() * 75))
      }, 2000)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
</script>

<!-- b-progress-backgrounds.vue -->

条纹背景

设置 striped 以通过 CSS 渐变在进度条的背景变体上应用条纹。

<template>
  <div>
    <b-progress :value="25" variant="success" :striped="striped"></b-progress>
    <b-progress :value="50" variant="info" :striped="striped" class="mt-2"></b-progress>
    <b-progress :value="75" variant="warning" :striped="striped" class="mt-2"></b-progress>
    <b-progress :value="100" variant="danger" :striped="striped" class="mt-2"></b-progress>

    <b-button variant="secondary" @click="striped = !striped" class="mt-3">
      {{ striped ? 'Remove' : 'Add' }} Striped
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        striped: true
      }
    }
  }
</script>

<!-- b-progress-striped.vue -->

动画背景

条纹渐变也可以通过设置 animated 属性来设置动画。

<template>
  <div>
    <b-progress :value="25" variant="success" striped :animated="animate"></b-progress>
    <b-progress :value="50" variant="info" striped :animated="animate" class="mt-2"></b-progress>
    <b-progress :value="75" variant="warning" striped :animated="animate" class="mt-2"></b-progress>
    <b-progress :value="100" variant="danger" :animated="animate" class="mt-3"></b-progress>

    <b-button variant="secondary" @click="animate = !animate" class="mt-3">
      {{ animate ? 'Stop' : 'Start' }} Animation
    </b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        animate: true
      }
    }
  }
</script>

<!-- b-progress-animated.vue -->

注释

  • 如果 animated 为 true，则 striped 将自动启用。
  • 动画进度条在 Opera 12 中不起作用，因为它们不支持 CSS3 动画。
  • 此组件的动画效果取决于 prefers-reduced-motion 媒体查询。有关更多详细信息，请参阅 无障碍文档的减少运动部分。

多个进度条

在 <b-progress> 组件中包含多个 <b-progress-bar> 子组件，以构建一组水平堆叠的进度条。

<template>
  <div>
    <b-progress :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress show-progress :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress show-value striped :max="max" class="mb-3">
      <b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
    </b-progress>

    <b-progress :max="max">
      <b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
      <b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
      <b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        values: [15, 30, 20],
        max: 100
      }
    }
  }
</script>

<!-- b-progress-multiple.vue -->

<b-progress-bar> 将继承 <b-progress> 父组件的大多数 prop，但您可以通过在 <b-progress-bar> 上设置它们来覆盖任何 prop。

注释

  • 如果指定了 height，则应始终在 <b-progress> 组件上设置。
  • <b-progress-bar> 将不会从 <b-progress> 继承 value。

组件参考

<b-progress>

查看源代码

属性

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

属性
类型
默认值
说明
animated
布尔值false启用动画背景。还自动设置“条纹”
height
字符串通过指定 CSS 高度值（包括单位）来覆盖默认高度
max
Number 或 String100设置最大值
精度
Number 或 String0将值四舍五入到小数点后的位数
显示进度
布尔值false以百分比显示当前进度值
显示值
布尔值false显示当前进度值
条纹
布尔值false启用条纹背景
值
Number 或 String0进度条的当前值
变体
字符串将 Bootstrap 主题颜色变体之一应用于组件

插槽

名称
说明
默认 要放置在进度元素中的内容（进度条）

<b-progress-bar>

查看源代码

属性

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

属性
（点击按升序排列）
类型
（点击按升序排列）
默认值
说明
animated
布尔值null启用动画背景。还自动设置“条纹”
标签
字符串文本字符串，用于明确设置标签
标签 HTML
谨慎使用 		字符串HTML 字符串，用于明确设置标签
max
Number 或 Stringnull设置最大值
精度
Number 或 Stringnull将值四舍五入到小数点后的位数
显示进度
布尔值null以百分比显示当前进度值
显示值
布尔值null显示当前进度值
条纹
布尔值null启用条纹背景
值
Number 或 String0进度条的当前值
变体
字符串将 Bootstrap 主题颜色变体之一应用于组件

注意：支持 HTML 字符串的属性（*-html）在传递原始用户提供的值时可能容易受到 跨站脚本 (XSS) 攻击 。你必须先正确 清理 用户输入！

插槽

名称
说明
默认 要放置在进度条中的内容。覆盖 `label`、`label-html`、`show-progress` 和 `show-value` 属性

导入单个组件

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

组件
命名导出
导入路径
<b-progress>BProgressbootstrap-vue
<b-progress-bar>BProgressBarbootstrap-vue

示例

import { BProgress } from 'bootstrap-vue'
Vue.component('b-progress', BProgress)

作为 Vue.js 插件导入

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

命名导出
导入路径
ProgressPluginbootstrap-vue

示例

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