yunshangxie/tuniao-ui/components/tn-line-progress/tn-line-progress.vue

144 lines
3.3 KiB
Vue
Raw Normal View History

2023-12-25 17:56:30 +08:00
<template>
<view
class="tn-line-progress-class tn-line-progress"
:style="[progressStyle]"
>
<view
class="tn-line-progress--active"
:class="[
$tn.color.getBackgroundColorInternalClass(activeColor),
striped ? stripedAnimation ? 'tn-line-progress__striped tn-line-progress__striped--active' : 'tn-line-progress__striped' : '',
]"
:style="[progressActiveStyle]"
>
<slot v-if="$slots.default || $slots.$default"></slot>
<block v-else-if="showPercent">{{ percent + '%' }}</block>
</view>
</view>
</template>
<script>
export default {
name: 'tn-line-progress',
props: {
// 进度(百分比)
percent: {
type: Number,
default: 0,
validator: val => {
return val >= 0 && val <= 100
}
},
// 高度
height: {
type: Number,
default: 0
},
// 是否显示为圆角
round: {
type: Boolean,
default: true
},
// 是否显示条纹
striped: {
type: Boolean,
default: false
},
// 条纹是否运动
stripedAnimation: {
type: Boolean,
default: true
},
// 激活部分颜色
activeColor: {
type: String,
default: ''
},
// 非激活部分颜色
inactiveColor: {
type: String,
default: ''
},
// 是否显示进度条内部百分比值
showPercent: {
type: Boolean,
default: false
}
},
computed: {
progressStyle() {
let style = {}
style.borderRadius = this.round ? '100rpx' : 0
if (this.height) {
style.height = this.$tn.string.getLengthUnitValue(this.height)
}
if (this.inactiveColor) {
style.backgroundColor = this.inactiveColor
}
return style
},
progressActiveStyle() {
let style = {}
style.width = this.percent + '%'
if (this.$tn.color.getBackgroundColorStyle(this.activeColor)) {
style.backgroundColor = this.$tn.color.getBackgroundColorStyle(this.activeColor)
}
return style
}
},
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
.tn-line-progress {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
align-items: center;
width: 100%;
height: 28rpx;
overflow: hidden;
border-radius: 100rpx;
background-color: $tn-progress-bg-color;
&--active {
display: flex;
flex-direction: row;
align-items: center;
justify-items: flex-end;
justify-content: space-around;
width: 0;
height: 100%;
font-size: 20rpx;
color: #FFFFFF;
background-color: $tn-main-color;
transition: all 0.3s ease;
}
&__striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 80rpx 80rpx;
&--active {
animation: progress-striped 2s linear infinite;
}
}
}
@keyframes progress-striped {
0% {
background-position: 0 0;
}
100% {
background-position: 80rpx 0;
}
}
</style>