Mango UI

Progress 进度条 pass 0.0.13+

基础用法

基础进度条，percentage 属性指定进度条的百分比，内置了如下几个状态
PS： 当同时有 status 与 status-format 时，将优先按照 status 的规则展示

完成
展开查看

提示

要注意status-format 是作为属性传入的
是 :status-format="func" 而不是 @status-format="func" !! 😁

  <template>
    <div class="progress-warp">
      <mg-progress :percentage="40"></mg-progress>
      <mg-progress :percentage="100" :status="'success'"></mg-progress>
      <mg-progress :percentage="40" :status="'warning'"></mg-progress>
      <mg-progress :percentage="40" :status="'error'"></mg-progress>
      <mg-progress 
        :percentage="100" 
        :stroke-color="'#42b983'" 
        :status-format="fomat">
      </mg-progress>
    </div>
  </template>
  <script>
    export default {
      methods: {
        fomat(p){
          return p === 100 ? '完成' : p + '%'
        }
      }
    }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

请注意

Progress 组件内部不会去判断 percentage 的大小，只负责UI上的展示
请在外部限制 percentage 在0-100
当然超过了也不会报错，只是会有一条警告消息

内部文字与高度

请注意控制高度的属性名是 stroke-width 而不是height

60%
100%
展开查看
<template>
  <mg-progress :percentage="40" :stroke-width="'6px'"></mg-progress>
  <mg-progress :percentage="60" :text-inside="true"></mg-progress>
  <mg-progress :percentage="100" :stroke-width="'20px'" :text-inside="true"></mg-progress>
</template>
1
2
3
4
5

环形进度条

type 属性设置为 circle 即可，默认大小为 100 * 100，width 属性可以设置其大小
ps：width 既是宽度也是高度，...毕竟人家是个圆

40%
展开查看
<template>
  <mg-progress :percentage="20" :type="'circle'"></mg-progress>
  <mg-progress :percentage="40" :type="'circle'" :status-format="fomat"></mg-progress>
  <mg-progress :percentage="60" :type="'circle'" :status="'warning'"></mg-progress>
  <mg-progress :percentage="80" :type="'circle'" :status="'error'"></mg-progress>
  <mg-progress :percentage="100" :type="'circle'" :status="'success'"></mg-progress>
</template>
<script>
  export default {
    methods: {
      fomat(p){
        return p === 100 ? '完成' : p + '%'
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

仪表盘

type 属性设置为 dashboard 即可，其他的...和环形差不多

40%
展开查看
<template>
  <mg-progress :percentage="20" :type="'dashboard'"></mg-progress>
  <mg-progress :percentage="40" :type="'dashboard'" :status-format="fomat"></mg-progress>
  <mg-progress :percentage="60" :type="'dashboard'" :status="'warning'"></mg-progress>
  <mg-progress :percentage="80" :type="'dashboard'" :status="'error'"></mg-progress>
  <mg-progress :percentage="100" :type="'dashboard'" :status="'success'"></mg-progress>
</template>
<script>
  export default {
    methods: {
      fomat(p){
        return p === 100 ? '完成' : p + '%'
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

颜色渐变

需要将 stroke-color 属性设置为一个对象，且包括 from 和 to 属性，如下示例
此外，默认样式，即 type 为 line（默认值） 的进度条还支持 active 属性，demo也在下方

20%
20%

展开查看
<template>
  <mg-progress :stroke-color="colors" :percentage="percentage"></mg-progress>

  <mg-progress :stroke-color="colors" active :percentage="percentage"></mg-progress>

  <mg-progress 
    :stroke-color="colors" 
    :percentage="percentage" :
    type="'circle'" 
    :status-format="fomat">
  </mg-progress>

  <mg-progress 
    :stroke-color="colors" 
    :percentage="percentage" 
    :type="'dashboard'" 
    :status-format="fomat">
  </mg-progress>

  <br>

  <mg-button @click="percentage -= 10">-</mg-button>
  <mg-button @click="percentage += 10">+</mg-button>

</template>
<script>
  export default {
    data:{
      percentage:20,
      colors:{
        from:'#50d4ab',
        to:'#5e7ce0',
      },
    },
    methods: {
      fomat(p){
        return p === 100 ? '完成' : p + '%'
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

...这个 active 好像应该写在上边的demo上哈...🤦‍♂️

Progress Attributes

参数说明类型可选值默认值
percentage百分比 0-100number--
type进度条的类型stringline，circle，dashboardline
active活跃样式，仅限 type=lineboolean--
textInside内部文字，仅限 type=lineboolean-false
width宽度string-circle 与 dashboard 默认100
statusFormat自定义状态显示内容function(percentage)--
status状态stringsuccess/warning/error-
statusStyle用于自定义状态部分的样式object--
bgColor进度条底部（背景）颜色string--
strokeWidth进度条的高度（线条宽度）string--
strokeColor进度条的颜色string--
关于 status 属性

status 展示的东西还是有限的，比如不能自定义 icon ，展示非常长的文字会导致 UI 展示不友好

个人认为此时可能用自己的方式在 Progress 外部实现想要的功能要更加方便 ✍️