最近公司的电商app需要做一个砍价的功能，具体UI如下： 下面是我开发的版本，样式基本保持一致。 可以看出，砍价最主要的部分就是砍价进度条的部分。
为了能够实现进度条的功能，我从uniapp插件市场查找到一款进度条的组件，详细介绍一下。
uniapp插件市场 cmd-progress进度条组件 https://ext.dcloud.net.cn/plugin?id=259 从组件介绍来看，基本可以满足我的需求。
下面介绍组件的具体使用方法：
cmd-progress组件的引入
import cmdProgress
from "@/components/cmd-progress/cmd-progress.vue"
export default {
components
: {cmdProgress
}
}
属性名类型默认值说明
typeStringline进度类型 - 线型：line、圆圈形：circle、仪表盘：dashboardpercentNumber0进度百分比值 - 显示范围0-100 ，可能数比较大就需要自己转成百分比的值success-percentNumber0进度已完成的百分几 - 仅支持进度线型：linestatusStringnormal进度状态 - 涌动：active（仅支持线型：line）、正常：normal、完成：success、失败：exceptionshow-infoBooleantrue进度状态信息 - 是否显示进度数值或状态图标stroke-widthNumber6进度线条的宽度 - 建议在条线的宽度范围：1-50，与进度条显示宽度有关stroke-colorString-进度线条的颜色 - 渐变色仅支持线型：linestroke-shapeStringround进度线条两端的形状 - 圆：round、方块直角：squarewidthNumber80进度画布宽度 - 仅支持圆圈形：circle、仪表盘：dashboardgap-degreeNumber0进度圆形缺口角度 - 可取值 0 ~ 360,仅支持圆圈形：circle、仪表盘：dashboardgap-positionStringtop进度圆形缺口位置 - 可取值’top’, ‘bottom’, ‘left’, ‘right’,仅支持圆圈形：circle、仪表盘：dashboard
<cmd
-progress
class="progress" :percent
="100"
:strokeWidth
="13" isAnimate
="true"
stroke
-color
="#FF4B4B"></cmd
-progress
>
<cmd
-progress
class="progress" :percent
="80"
:strokeWidth
="13" isAnimate
="true"
stroke
-color
="#FF4B4B"></cmd
-progress
>
