vue 渐变 进度条 progress
2024-09-01 15:22:32
废话 不多少说 ，直接上代码
新建文件 gradual-progress.vue
<!--
* @Author: gfc
* @Date: 2019-11-07 14:00:11
* @LastEditors: gfc
* @LastEditTime: 2019-11-13 10:24:44
* @Description: cp 渐变式进度条
eg:
<cp-progress :percentage="progressnum" style="width:300px"></cp-progress>
-->
<template>
<div class="cp-progress-main">
<div class="cp-progress-bg" :style="{ 'border-radius': bRadius+'px'}">
<div class="cp-progress-bar"
:style="{ width: getPercentage+'%' ,background:getGradient,height:strokeWidth+'px' ,'border-radius': bRadius+'px'}"></div>
</div>
<div class="cp-progress-text" :style="{ 'line-height': (strokeWidth+16)+'px'}">{{getPercentage}}%</div>
</div>
</template>
<script> export default {
data () {
return { }
},
computed: {
// 通过比例 获取 百分比
getPercentage () {
if (this.percentage < 0) {
return 0
} else if (this.percentage > 1) {
return 100
} else {
// console.log(this.percentage)
return parseInt((this.percentage + 0.000006) * 100)
}
},
// 获取 进度条颜色对象
getGradient () {
let linecolor = this.getColorItem(this.percentage)
if (linecolor) {
return 'linear-gradient(90deg,' + linecolor.s + ',' + linecolor.e + ')'
} else {
return ''
}
}
},
methods: {
// 根据进度 获取颜色数组
getColorItem (p) {
let mp = this.getPercentage
for (let sub of this.linearColors) {
if (!sub.ef && mp <= sub.v) {
return sub
} else if (sub.ef && mp < sub.v) {
return sub
}
}
return null
}
},
props: {
// 设置 进度条的 弧度
bRadius: {
type: Number,
default: 4
},
textInside: {
type: Number,
default: 100
},
// 进度条的高度 就是粗细度
strokeWidth: {
type: Number,
default: 8
},
// 进度条 的百分比 [0-1] 的小数
percentage: {
type: Number,
default: 0
},
// 进度条 每个阶段的 颜色组
linearColors: {
type: Array,
default: function () {
return [{ v: 25, s: '#F7564A', e: '#F7564A' }, { v: 50, s: '#F7564A', e: '#F7E04B' }, { v: 100, s: '#F7E04B', e: '#25CCDB', ef: true }, { v: 100, s: '#25CCDB', e: '#25CCDB' }]
}
}
}
}
</script>
<style lang="scss" scoped>
.cp-progress-main {
display: flex;
.cp-progress-bg {
width: 50px;
background: #eaedf4;
flex: 1;
margin: 8px 0;
.cp-progress-bar {
transition: width 1s;
}
}
.cp-progress-text {
width: 50px;
font-size: 12px;
font-weight: 400;
color: #333333; margin-left: 10px;
}
}
</style>
使用方法：
<cp-progress :percentage="progressnum" style="width:300px"></cp-progress>
progressnum ： [0-1]
不同的阶段 不同颜色进行设置：已经默认了一组颜色
linearColors
[{ v: 100, s: '#F7E04B', e: '#25CCDB', ef: true }]
v 标识设置的百分比 s为开始颜色 ，e 为结束颜色 ef：标识 包不包含 v这个值，true 标识不包含,默认false包含
v 的值需要从小到大 范围[0-100]
效果：
最新文章
- eclipse配置tomcat
- @html.ActionLink的几种参数格式
- liux vim命令
- javascript控制子页面对父页面控件操作
- vs自带服务测试工具
- U3D 背景音效和事件触发音效
- Winform使用DevExpress的WaitDialogForm画面
- SQL Server 空间监测
- 交互式命令 expect
- 终端查询数据库sqlite（创建你自己，或者是coredata创建）那里的东西
- iOS UICollectionView高级用法(长按自由移动cell)-新
- [译]Selenium Python文档：五、Waits等待
- MongoDB环境安装
- 12 Nonlinear Transformation
- Redis实际开发中常见问题
- php 操作数据库
- 神州数码OSPF路由汇总配置
- JAVA 8 主要新特性 ----------------(四)Lambda函数式接口
- Python3基础 while 斐波那契数列
- 2018.06.29 NOIP模拟 边的处理（分治+dp）