Vue2 组件:进度条
组件实现了:
- 可自定义进度条颜色
- 可自定义进度条高度
- 进度文字位置可指定
- 进度条动画时长
效果图:
现在我们就来看看组件要怎么实现
代码
<template>
<div class="ku-progress-box" :class="{true:'outer '+ textPosition ,false:'inner '+ textPosition}[isOuter] " :style="`height:${barHeight}px`">
<div class="ku-progress-line-bar" :style="`border-radius:${barHeight}px`">
<div class="ku-progress-line-bar-runner" :style="runnerStyle">
<span v-if="!isOuter" class="ku-progress-text">{{textCurrentValue}}%</span>
</div>
</div>
<span v-if="isOuter" class="ku-progress-text">{{textCurrentValue}}%</span>
</div>
</template>
<script>
export default {
name: "kuProgress",
data() {
return {
barEndValue: 0,
timer: null,
textCurrentValue: 0,
runnerStyle: ""
};
},
props: {
dulation: {
type: Number,
default: 1
},
percentage: {
type: Number,
default: 0
},
barHeight: {
type: Number,
default: 5
},
textPosition: {
type: String,
default: "outer-right"
},
backgroundColor: {
type: String,
default: "#50bfff"
}
},
computed: {
isOuter() {
return !!~this.textPosition.search("outer"); // 返回一个布尔值
}
},
created() {},
methods: {},
mounted() {
setTimeout(() => {
this.barEndValue = this.percentage;
this.runnerStyle = `width: ${this.barEndValue}%;transition:${
this.dulation
}s;background:${this.backgroundColor}`;
this.timer = setInterval(() => {
this.textCurrentValue += 1;
if (this.textCurrentValue >= this.percentage) {
this.textCurrentValue = this.percentage;
clearInterval(this.timer);
}
}, (this.dulation / this.barEndValue) * 1000);
});
}
};
</script>
<style scoped>
.ku-progress-box {
position: relative;
}
.ku-progress-line-bar {
height: 6px;
position: absolute;
left: 0;
right: 0;
top: 0;
background: #eee;
-webkit-box-shadow: inset 2px 2px 3px #ddd;
-moz-box-shadow: inset 2px 2px 3px #ddd;
box-shadow: inset 2px 2px 3px #ddd;
border-radius: 8px;
height: 100%;
}
.ku-progress-line-bar-runner {
width: 0;
height: 6px;
position: absolute;
left: 0;
background: #50bfff;
border-radius: 8px;
height: 100%;
border-radius: inherit;
/* transition: 1s; */
}
.ku-progress-text {
position: absolute;
}
.ku-progress-box.outer .ku-progress-text {
right: 0px;
}
.ku-progress-box.outer-top .ku-progress-text {
top: -24px;
}
.ku-progress-box.outer-right .ku-progress-line-bar {
right: 45px;
}
.ku-progress-box.outer-right .ku-progress-text {
top: 50%;
transform: translateY(-50%);
}
.ku-progress-box.outer-bottom .ku-progress-text {
bottom: -24px;
}
.ku-progress-box.inner .ku-progress-text {
font-size: 14px;
color: #fff;
top: 50%;
line-height: 1.1;
}
.ku-progress-box.inner-left .ku-progress-text {
left: 24px;
transform: translate(-50%, -50%);
}
.ku-progress-box.inner-right .ku-progress-text {
right: 12px;
transform: translateY(-50%);
}
.ku-progress-box.inner-center .ku-progress-text {
left: 50%;
transform: translate(-50%, -50%);
}
</style>
简单地使用:
在要使用的地方引入组件后,在 HTML 结构中通过对应标签调用就行:
<ku-progress text-position="outer-top" :percentage="90" :bar-height="10"></ku-progress>
参数说明:
属性 | 详细说明 |
percentage
|
必填,进度百度比值 |
bar-height
|
可选,进度条高度(默认值为5) |
text-position
|
可选 ,指定进度文字的位置(默认外右outer-right) |
dulation
|
可选 ,指定进度条动画时长(默认值为1) |
background | 可选 ,指定进度条颜色(默认值为#50bfff) |
-
微信扫一扫,赏我
-
支付宝扫一扫,赏我