• 引入
  • 代码演示
    • 基本
    • 其他配置
  • API
    • Progress Props
    • Progress Slots
      • default
      • defs

    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元素等