AsUI

Progress进度条

# 线形进度条

<template>
  <div class="t-linear-progress-area">
    <as-progress :percentage="50"></as-progress>
    <as-progress :percentage="100" :format="format"></as-progress>
    <as-progress :percentage="100" status="success"></as-progress>
    <as-progress :percentage="100" status="warning"></as-progress>
    <as-progress :percentage="50" status="exception"></as-progress>
  </div>
</template>
<script>
export default {
  name: "t-linear-progress",
  methods: {
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    }
  }
}
</script>
<style>
.t-linear-progress-area .as-progress{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
Expand Copy

# 百分比内显

<template>
  <div class="t-text-inside-progress-area">
    <as-progress :text-inside="true" :stroke-width="26" :percentage="70"></as-progress>
    <as-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></as-progress>
    <as-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></as-progress>
    <as-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></as-progress>
  </div>
</template>
<script>
export default {
  name: "t-text-inside-progress",
}
</script>
<style>
.t-text-inside-progress-area .as-progress{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
Expand Copy

# 自定义颜色

<template>
  <div class="t-custom-color-progress-area">
    <as-progress :percentage="percentage" :color="customColor"></as-progress>

    <as-progress :percentage="percentage" :color="customColorMethod"></as-progress>

    <as-progress :percentage="percentage" :color="customColors"></as-progress>
    <div>
      <as-button-group>
        <as-button icon="as-icon-minus" @click="decrease"></as-button>
        <as-button icon="as-icon-plus" @click="increase"></as-button>
      </as-button-group>
    </div>
  </div>
</template>
<script>
export default {
  name: "t-text-inside-progress",
  data() {
    return {
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    };
  },
  methods: {
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } else {
        return '#67c23a';
      }
    },
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
}
</script>
<style>
.t-custom-color-progress-area .as-progress{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
Expand Copy

# 环形进度条

<template>
  <div class="t-circle-progress-area">
    <as-progress type="circle" :percentage="0"></as-progress>
    <as-progress type="circle" :percentage="25"></as-progress>
    <as-progress type="circle" :percentage="100" status="success"></as-progress>
    <as-progress type="circle" :percentage="70" status="warning"></as-progress>
    <as-progress type="circle" :percentage="50" status="exception"></as-progress>
  </div>
</template>
<script>
export default {
  name: "t-circle-progress",
}
</script>
<style>
.t-circle-progress-area .as-progress{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
Expand Copy

# 仪表盘形进度条

<template>
  <div class="t-dashboard-progress-area">
    <as-progress type="dashboard" :percentage="percentage" :color="colors"></as-progress>
    <div>
      <as-button-group>
        <as-button icon="as-icon-minus" @click="decrease"></as-button>
        <as-button icon="as-icon-plus" @click="increase"></as-button>
      </as-button-group>
    </div>
  </div>
</template>
<script>
export default {
  name: "t-circle-progress",
  data() {
    return {
      percentage: 10,
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    };
  },
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
}
</script>
<style>
</style>
Expand Copy

# Attributes

参数 默认值 说明
percentage 0 百分比(必填),类型为Number,可选值为0-100
type -- 进度条类型,类型为String,可选值为line/circle/dashboard
stroke-width 6 进度条的宽度,单位px,类型为Number
text-inside false 进度条显示文字内置在进度条内(只在 type=line 时可用),类型为Boolean
status -- 进度条当前状态,类型为String,可选值为success/exception/warning
color '' 进度条背景色(会覆盖status状态颜色),类型为String/Function/Array
width 126 环形进度条画布宽度(只在type为circle或dashboard时可用),类型为Number
show-text true 是否显示进度条文字内容,类型为Boolean
stroke-linecap round circle/dashboard类型路径两端的形状,类型为String,可选值为butt/round/square
format -- 指定进度条文字内容,类型为function(percentage)
define-back-color -- 指定进度条字体颜色(支持hex格式),类型为String
text-color -- 指定进度条字体颜色(支持hex格式),类型为String

← Result结果 →