Progress 进度

Scan me!

进度圆环，用于将数据直观地传达给用户

引入

  1. import { Progress } from 'mand-mobile'
  3. Vue.component(Progress.name, Progress)

代码演示

基本

Progress 进度 - 图2

  1.         <template>
  2.   <div class="md-example-child md-example-child-progress">
  3.     <md-progress
  4.       :size="100"
  5.       :value="0.2"
  6.       :width="5"
  7.     >
  8.       <span class="progress-value">20%</span>
  9.     </md-progress>
  10.     <md-progress
  11.       :size="100"
  12.       :value="0.5"
  13.       :width="5"
  14.     >
  15.       <span class="progress-value">50%</span>
  16.     </md-progress>
  17.     <md-progress
  18.       :size="100"
  19.       :value="1"
  20.       :width="5"
  21.     >
  22.       <span class="progress-value">100%</span>
  23.     </md-progress>
  24.   </div>
  25. </template>
  27. <script>
  28. import {Progress} from 'mand-mobile'
  30. export default {
  31.   name: 'progress-demo',
  32.   components: {
  33.     [Progress.name]: Progress,
  34.   },
  35. }
  37. </script>
  39. <style lang="stylus">
  40. .md-example-child-progress
  41.   display flex
  42.   justify-content center
  43.   .md-progress
  44.     margin 0 10px
  45.   .progress-value
  46.     font-size 24px
  47.     font-family DINPro-Medium
  48. </style>
  49.  
  50.

其他配置

Progress 进度 - 图3

  1.         <template>
  2.   <div class="md-example-child md-example-child-progress">
  3.     <md-progress
  4.       :value="0.8"
  5.       :width="10"
  6.       :size="100"
  7.       color="url(#linear)"
  8.       border-color="#FFF"
  9.       linecap="butt"
  10.     >
  11.       <span class="progress-value">80%</span>
  12.       <defs slot="defs">
  13.         <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
  14.           <stop offset="0%"   stop-color="#FF5257"/>
  15.           <stop offset="100%" stop-color="#FFC541D6"/>
  16.         </linearGradient>
  17.       </defs>
  18.     </md-progress>
  19.     <md-progress
  20.       :value="0.8"
  21.       :width="10"
  22.       :size="100"
  23.       :rotate="-90"
  24.       color="#FF5257"
  25.       transition
  26.     >
  27.       <span class="progress-value">
  28.         <md-amount
  29.           :value="80"
  30.           :precision="0"
  31.           transition
  32.         ></md-amount>%
  33.       </span>
  34.     </md-progress>
  35.   </div>
  36. </template>
  38. <script>
  39. import {Amount, Progress} from 'mand-mobile'
  41. export default {
  42.   name: 'progress-demo',
  43.   components: {
  44.     [Amount.name]: Amount,
  45.     [Progress.name]: Progress,
  46.   },
  47. }
  49. </script>
  51. <style lang="stylus">
  52. .md-example-child-progress
  53.   display flex
  54.   justify-content center
  55.   .md-progress
  56.     margin 0 10px
  57.   .progress-value
  58.     font-size 24px
  59.     font-family DINPro-Medium
  60. </style>
  61.  
  62.

API

Progress Props

属性说明类型默认值备注
value进度值Number00-1
size圆环大小Number70单位px
width圆环宽度Number-单位px
color圆环高亮颜色String#fc9153-
border-color圆环颜色Stringrgba(0, 0, 0, .1)-
fill圆环内部填充Stringtransparent-
linecap圆环两端形状Stringroundround, butt
rotate圆环旋转Number0-
transition进度变化是否使用动效Booleanfalse-
duration进度变化动效时长Number1000单位ms

Progress Slots

default

圆环内部内容插槽，一般用于添加文本

defs

圆环SVG内部的插槽，一般用于添加defs, use元素等