suitProgress 通用进度条

背景

为了实现小程序的盾构管理中每台盾构机的进度展示

使用示例

<template v-for="item in tableList">
    <suit-progress :showText="false"  :percentage="item.content.current/item.content.ring*100" :height:"15">
	<template v-slot:top-right>{{item.content.currentTofixed2}} / {{item.content.ringTofixed2}}</template>
	<template v-slot:top-left>{{item.content.percentage}}</template>
	</suit-progress>
</template>

<script>
     export defalut{
        data(){
            tableList:[
                {
                    arcWorkpieceCount: 355,
                    code: "JCXSG-2_TBM_01",
                    current: 0,
                    currentTofixed2: "0",
                    id: 2,
                    midPartitionCount: 0,
                    name: "盾构",
                    percentage: "0.00%",
                    projectId: 1,
                    psn: "20211116141503002",
                    ring: 2472,
                    ringTofixed2: "2472",
                    shieldId: 4,
                    startDate: 1640016000000,
                    state: "",
                    tbmType: "0",
                    tendersId: 12,
                    tendersName: "2标"
                    }
                    ]
        }
     }
</script>

参数说明

属性	描述	类型	可选值	默认值
percentage	组件进度条的百分比	String, Number	—	0
height	组件进度条的高度	Number	—	8
showText	组件进度条的高度	Boolean	true,false	true

slot

插槽	说明
top-left	进度条左上方区域，传入自定义内容，内容一般为进度条的百分比数
top-righ	进度条右上方区域，传入自定义内容

源码及综合示例参考

组件源码 (opens new window)