Progress 进度条 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

//默认位置，position:fixed置顶
<Progress :percent="20" />
//进入文档流，position:normal
 <Progress type="bar" :percent="50" position="normal" />
//隐藏未填充部分
<Progress type="bar" :percent="40" position="normal" :unfilled="false" />
//自定义样式
<template>
  <Progress type="bar" :percent="40" position="normal" :barStyle="barStyle" :backStyle="backStyle"/>
</template>
<script>
export default {
  data () {
    return {
      barStyle: {
        'background': '#ff5b05'
      },
      backStyle: {
        'background': '#13C2C2'
      }
    }
  }
}
</script>

//默认样式
<Progress type="circle" :percent="25" />
//插入图片
<Progress type="circle" :percent="75" :circleImg="circleImg" />
//插入图标
<Progress type="circle" :percent="100" :circleIcon="circleIcon" />
//自定义样式
<template>
  <Progress type="circle" :percent="25" :circleStyle="circleStyle" @click="handleClick" />
</template>
<script>
export default {
  data () {
    return {
      circleImg: 'https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg',
      circleIcon: {
        type: 'check'
      },
      circleStyle: {
        'borderSize': '10px',
        'borderColor': 'red',
        'backColor': 'blue',
        'circleSize': '80px',
        'msgColor': 'red'
      }
    }
  },
  methods: {
    handleClick () {
      console.log('click')
    }
  }
}
</script>