BIN-UI-DESIGN

Appearance

On this page

进度条 Progress ​

展示操作或任务的当前进度，比如上传文件。

基础用法 ​

Progress 组件设置 percent 属性即可，表示进度条对应的百分比，必填，必须在 0-100。

0%
进度70
<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress :percent="0"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="70" status="text" active><span>进度70</span></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="100" status="success"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="50" status="exception"></b-progress>
    </div>
  </div>
</template>
<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress :percent="0"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="70" status="text" active><span>进度70</span></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="100" status="success"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="50" status="exception"></b-progress>
    </div>
  </div>
</template>

文字内显示 ​

可以设置 text-inside 来配置文字内显示模式

0%
70%
80%
100%
50% 
<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="0"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="70"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress
        text-inside
        :stroke-width="20"
        :percent="80"
        color="rgba(142, 113, 199, 0.7)"
      ></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="100" status="success"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="50" status="exception"></b-progress>
    </div>
  </div>
</template>
<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="0"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="70"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress
        text-inside
        :stroke-width="20"
        :percent="80"
        color="rgba(142, 113, 199, 0.7)"
      ></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="100" status="success"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="50" status="exception"></b-progress>
    </div>
  </div>
</template>

设置样式 ​

可以设置 color 和 radius等 来配置属性样式、通过开启active可以开启动画样式

40%
60%
30%
进度60
<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress :percent="70" :show-text="false"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="40" color="#76eeff"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="60" color="#df52ff"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :stroke-width="20" :percent="30" color="#ffcf2f"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="60" status="text" active><span>进度60</span></b-progress>
    </div>
  </div>
</template>
<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress :percent="70" :show-text="false"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="40" color="#76eeff"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="60" color="#df52ff"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :stroke-width="20" :percent="30" color="#ffcf2f"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="60" status="text" active><span>进度60</span></b-progress>
    </div>
  </div>
</template>

动态进度 ​

可以配合外部操作进度

10%
<template>
  <div style="width: 350px">
    <b-progress :stroke-width="20" :percent="percent" active color="#ff86d8"></b-progress>

    <div class="mt-16">
      <b-button-group>
        <b-button icon="minus" size="mini" @click="minus"></b-button>
        <b-button icon="plus" size="mini" @click="add"></b-button>
      </b-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const percent = ref(10)

function add() {
  percent.value += 10
  if (percent.value >= 100) percent.value = 100
}

function minus() {
  percent.value -= 10
  if (percent.value < 0) percent.value = 0
}
</script>
<template>
  <div style="width: 350px">
    <b-progress :stroke-width="20" :percent="percent" active color="#ff86d8"></b-progress>

    <div class="mt-16">
      <b-button-group>
        <b-button icon="minus" size="mini" @click="minus"></b-button>
        <b-button icon="plus" size="mini" @click="add"></b-button>
      </b-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const percent = ref(10)

function add() {
  percent.value += 10
  if (percent.value >= 100) percent.value = 100
}

function minus() {
  percent.value -= 10
  if (percent.value < 0) percent.value = 0
}
</script>

Props ​

参数说明类型可选值默认值
percent百分比Number—0
status进度条状态Stringtext/success/exception—
stroke-width进度条的线宽，单位 pxNumber—8
text-inside进度条显示文字内置在进度条内Boolean—false
show-text是否显示进度文字Boolean—true
bg-color进度条背景颜色String—#f3f3f3
color进度条的颜色String—#2d8cf0
radius进度条的圆角String—100px
active进度条背景动画Boolean—false

MIT Licensed | Copyright © 2023-present bin-ui-design