进度指示器(Progress)

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

<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>

值

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

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

<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-bar>子组件中的默认插槽，或使用<b-progress-bar>上的 label或 label-html属性，提供您自己的标签：

Custom label via default slot

Progress: 33.33 / 50

Custom label via property

66.67%

Custom label via property (HTML support)

~~33.333333333~~

<template>
  <div>
    <h5>Custom label via default slot</h5>
    <b-progress :max="max" height="2rem">
      <b-progress-bar :value="value">
        Progress: <strong>{{ value.toFixed(2) }} / {{ max }}</strong>
      </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-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宽度类之一。

Default width

Custom widths

<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>

进度条的高度可以通过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>

背景

使用背景变体更改单个进度条的外观。默认变量是primary。

实体背景变量

success:

info:

warning:

danger:

primary:

secondary:

dark:

<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>

条纹背景

将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>

动画背景

也可以通过设置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>

注意事项:

如果animated为true，则将自动启用条纹。
动画进度条在Opera12中不起作用，因为它们不支持CSS3动画。

多条

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

<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-bar>将继承<b-progress>父组件的大部分属性，但是您可以通过在<b-progress-bar>上进行设置来覆盖任何属性。

注意事项:

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

组件参考

`<b-progress>`

View source

<b-progress> 属性

Properties

属性	类型	默认值	描述
`variant`	String		将一个引导主题颜色变体应用于组件
`striped`	Boolean	`false`	启用条纹背景
`animated`	Boolean	`false`	启用动画背景。也会自动设置“条纹”
`height`	String		通过指定CSS高度值（包括单位）覆盖默认高度
`precision`	Number or String	`0`	小数点后四舍五入到的位数
`show-progress`	Boolean	`false`	以百分比形式显示当前进度值
`show-value`	Boolean	`false`	显示当前进度值
`max`	Number or String	`100`	设置最大值
`value`	Number or String	`0`	进度条的当前值

`<b-progress-bar>`

View source

<b-progress-bar> 属性

Properties

属性 (Click to sort Ascending)	类型	默认值	描述
`value`	Number or String	`0`	进度条的当前值
`label`	String		文本字符串，用于将标签明确设置为
`label-html` Use with caution	String		HTML字符串，用于将标签明确设置为。谨慎使用
`max`	Number or String		设定最大值
`precision`	Number or String		小数点后四舍五入的位数
`variant`	String		将Bootstrap主题颜色变体之一应用于组件
`striped`	Boolean		启用条纹背景
`animated`	Boolean		启用动画背景。同时自动设置“条纹”
`show-progress`	Boolean		以百分比显示当前进度值
`show-value`	Boolean		显示当前进度值

警告: 当传递原始用户提供的值时，支持HTML字符串（*-html）的属性可能容易受到跨站点脚本（XSS）攻击。必须先正确清理用户输入！

导入单个组件

可以通过以下命名导出将各个组件导入到项目中：

组成部分	命名导出	导入路径
`<b-progress>`	`BProgress`	`bootstrap-vue`
`<b-progress-bar>`	`BProgressBar`	`bootstrap-vue`

例子:

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

作为Vue.js插件导入

这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。

命名导出	导入路径
`ProgressPlugin`	`bootstrap-vue`

例子:

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