Progress 进度条

基本用法

<wx-progress :percentage="20"></wx-progress>

宽度/颜色/不显示进度文本

<wx-progress :percentage="20" color="#10aeff" :stroke-width="6" :show-text="false"></wx-progress>

状态控制

<wx-progress :percentage="p1" :status="s1" :color="c1"></wx-progress>
<wx-progress :percentage="p2" :status="s2"></wx-progress>

<wx-button @click="handleClick">上传</wx-button>

<script>
export default {
  data() {
    return {
      p1: 0,
      p2: 0,
      s1: null,
      s2: null,
      c1: null
    };
  },
  methods: {
    handleClick() {
      this.p1 = 0;
      this.p2 = 0;
      this.s1 = null;
      this.s2 = null;
      this.c1 = null;
      let inte = setInterval(() => {
        if (this.p1 < 70) {
          this.p1 += 1;
        } else {
          this.s1 = "fail";
          this.c1 = "#fa5151";
        }
        if (this.p2 < 100) {
          this.p2 += 1;
        } else {
          this.s2 = "success";
          clearInterval(inte);
        }
      }, 50);
    }
  }
};
</script>

Progress Attributes

参数	说明	类型	可选值	默认值
percentage	百分比（必填）	Number	0-100	0
status	进度条当前状态	String	success/fail	-
strokeWidth	进度条的宽度，单位 px	Number	-	4
color	进度条背景色	String	-	-
showText	是否显示进度文本	Boolean	-	true

进度条