基于vue开发, 条形进度图展示组件
可自由进度条颜色,宽度高度,图片icon
提示:以下是本篇文章正文内容,下面案例可供参考
一、创建组件
<template>
<view class="plan_box">
<view class="plan_show" :style="[{'width':widthData,'background':bgc}]">
<view v-if="!!img" class="icon">
<img class="icon_img" :src="img" />
</view>
<view v-if="showAverage" class="average_box" :style="[{'left':averageData}]">
</view>
</view>
</view>
</template>
<script>
export default{
/**
* 高度、宽度继承外层父元素高度,可根据外层父元素高度设定
*/
props: {
// 进度完成量
widthVal:{
type:String | Number,
default:0
},
//进度总量
all:{
type:Number,
default:100
},
// 背景颜色 支持颜色值,渐变色 例 :'linear-gradient(to right,#A77DF3, #E2A4F8)'
bgc:{
type:String,
default: '#A77DF3'
},
// 图片icon
img:{
type:String,
default: null
},
// 是否显示平均值标识
showAverage:{
type:Boolean,
default: false
},
// 第三种指示标识
averageVal:{
type:String | Number,
default:0
}
},
watch:{
widthVal:{
immediate: true,
handler (newVal, oldVal) {
this.widthData = this.countWidth(newVal,this.all)
},
},
averageVal:{
immediate: true,
handler (newVal, oldVal) {
this.averageData = this.countWidth(newVal,this.all)
},
}
},
data() {
return {
widthData:"0%"
};
},
methods:{
countWidth(part,all){
if (part && all) {
let num = Math.round(Math.abs(Number(part)) / Math.abs(Number(all)) * 100)
return num + '%'
} else {
return '0%'
}
}
}
}
</script>
<style lang="scss">
.plan_box{
height: 100%;
width: 100%;
background-color: #F2F2F2;
border-radius: 20px;
position: relative;
}
.plan_show{
min-width: 0%;
max-width: 100%;
height: inherit;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.icon{
width: 40rpx;
min-width: 40rpx;
height: 40rpx;
min-height: 40rpx;
margin-right: -30rpx;
}
.icon_img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.average_box{
width: 6rpx;
height: 120%;
background-color: #FD8F78;
position: absolute;
}
</style>
二、使用
在父组件中使用该组件
<view class="line">
<plan-line
:showAverage="true"
:averageVal='50'
:widthVal='80'
:all="100"
:bgc="'linear-gradient(to right,#A77DF3, #E2A4F8)'"
:img="require('../img_biaoyang.png')">
</plan-line>
</view>
//css
.plan{
width: 67%;
height: 30rpx;
}
2.最终效果
该处使用的url网络请求的数据。
总结
个人开发需求总结的小组件,有需要用的同志自行修改