Progress 横向进度条

使用指南

import Progress from '@hips/uni-ui/lib/progress';

export default {
  components: {
    'hips-progress': Progress,
  },
};

跨平台支持

微信小程序	支付宝小程序	钉钉小程序	百度小程序	头条小程序	QQ 小程序
✔️	-	-	-	-	-

代码演示

基础用法

<hips-progress :percent="20" />

修改颜色

<hips-progress :percent="40" color="orange" />

<hips-progress :color="colorArray" :percent="40" />
<hips-progress :color="colorMethod" :percent="40" />

export default {
  data() {
    return {
      colorArray: ['#f56c6c', '#e6a23c', '#5cb87a', '#1989fa', '#6f7ad3'],
    };
  },
  methods: {
    colorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      }
      return '#67c23a';
    },
  },
};

注意

color 参数接收字符串、数组、方法。

1. color 是字符串时，进度条颜色固定为配置的颜色
2. color 是数组时，进度条颜色根据颜色占比进行变化
3. color 是方法时，接收一个百分比的参数，可以根据这个参数计算颜色配置。

百分比文字配置

<hips-progress
  :percent="40"
  color="orange"
  text-font-size="12"
  text-font-color="white"
/>
<hips-progress :format="format" :percent="100" />

export default {
  methods: {
    format(percentage) {
      return percentage === 100 ? 'ok' : `${percentage}%`;
    },
  },
};

注意

format 参数接收一个方法，传递一个百分比值，可以对百分比值进行逻辑判断，返回一个字符串结果。

百分比文字位置

<hips-progress :percent="40" />

<hips-progress text-position="inner" :percent="70" />

Progress API

参数	说明	类型	默认值
percent	进度数据 0-100	String | Number	0
stroke-width	进度条线条宽度	String | Number	6
text-viewable	进度百分比文字是否显示	Boolean	true
text-position	进度百分比显示位置，outer-外部/inner-内部	String	outer
text-font-size	进度百分比字体大小	String | Number	14
text-font-color	进度百分比字体颜色	String	#1F8CEB
color	进度条颜色	String | Array | Function	-
format	进度条百分比文字显示格式化	Function	-

注意

进度条线条宽度根据 stroke-width 参数和 text-position 参数一起确定

1. 当 text-position='inner' 时，需要判断文字字体大小和 stroke-width 大小，取最大值
2. 当 text-position='outer' 时，取 stroke-width

// 源码相关示例
export default {
  computed: {
    outerStyle() {
      let height = this.strokeWidth;
      if (this.textPosition === 'inner') {
        height = Math.max(
          Number(this.strokeWidth),
          Number(this.textFontSize) + 4 // 添加文字上下padding值
        );
      }

      return `height: ${height * 2}rpx;`;
    },
  },
};