# obit-progress进度条
代码实现
<!--
* @Author: 曹捷
* @Date: 2020-03-11 10:25:24
* @LastEditors: 曹捷
* @LastEditTime: 2020-04-16 16:28:35
* @Description: 渐变百分比进度条
-->
<template>
<div class="module-info full scrollBar">
<div :key="index" class="info-item" v-for="(item,index) in dataList">
<span class="title">{{item.name}}</span>
<obit-progress :format="formatProgress(item)" :percentage="item.percentage" :stroke-width="18" class="module-progress"></obit-progress>
</div>
</div>
</template>
<script>
import obitProgress from './../../../src/obit-progress/obit-progress'
export default {
components: { obitProgress },
data() {
return {
dataList: [
{
name: '服务手册',
value: 888,
trend: 0,
percentage: 20
},
{
name: '新闻资讯',
value: 22888,
trend: 1,
percentage: 80
},
{
name: '问卷调查',
value: 15888,
trend: 0,
percentage: 60
},
{
name: '生命体征',
value: 22888,
trend: 1,
percentage: 80
},
{
name: '活动影像',
value: 18888,
trend: 1,
percentage: 70
},
{
name: '网络课堂',
value: 21888,
trend: 1,
percentage: 90
},
{
name: '军休文化',
value: 25388,
trend: 1,
percentage: 100
}
]
}
},
methods: {
formatProgress(item) {
return `<span class="progress-text">${item.value} <span>${
item.trend === 1 ? '↑' : '↓'
}</span></span>`
}
}
}
</script>
<style lang="scss">
.module-info {
overflow: auto;
.info-item {
display: flex;
height: 14%;
align-items: center;
.module-progress {
flex: 1;
}
}
.el-progress-bar {
margin-right: 0px;
padding-right: 0;
width: 83%;
}
.el-progress-bar__inner {
background-image: linear-gradient(160deg, #ffeb5c 10%, #fc4e1d 90%);
}
.progress-text {
position: relative;
span {
position: absolute;
right: -8px;
top: -1px;
}
}
.el-progress__text {
color: #fc4e1d;
font-size: 16px !important;
}
.title {
color: #fc4e1d;
padding: 0 10px;
}
.el-progress-bar__outer {
background-color: transparent;
}
}
</style>
# 参数说明
参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 |
---|---|---|---|---|---|
type | 进度条类型 | String | 'line'线形 'circle'圆形 'dashboard 半圆形 | - | - |
percentage | 进度占比 最高100 | Number | - | 0 | true |
status | 是否在进度条后面展示状态图标 对应三个 | String | 'success', 'exception', 'warning' | - | - |
strokeWidth | 进度条高度亦或者宽度 | Number | - | 6 | - |
textInside | 文字是否展示在进度条之内 | Boolean | - | false | - |
width | 宽度 | Number | - | 126 | - |
showText | 是否展示文字 | Boolean | - | true | - |
color | 状态显示颜色 | String, Array, Function | - | - | - |
format | 状态条文字 自定义 | Function, String | - | - | - |