Vue自定义进度条组件
2020-04-10 本文已影响0人
夏海峰
进度条组件
使用Vue自定义进度条 Progress 组件。基本实现思路：用两个嵌套的div，外层div给蓝色背景，内层div给黄色背景；动态地改变黄色div的宽度，动态地计算出色彩（宽度）占比。
1、核心代码如下
<body>
<div id='app'>
<!-- 使用进度条组件 -->
<my-progress :rate='rate'></myprogress>
</div>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 自定义进度条组件
Vue.component('my-progress', {
props: {
rate: {
type: Number,
required: false,
default: 0
}
},
template: `
<div>
<div class="progress">
<div class="rate" :style='{"width":rate+"px"}'></div>
</div>
<div class='nums'>
<div><span v-text='Math.round(rate/2)'></span>%</div>
<div><span v-text='100-Math.round(rate/2)'></span>%</div>
</div>
</div>
`
})
// 创建Vue根实例
var app = new Vue({
el: '#app',
data: {
rate: 0 // 0~200 代表蓝色div的宽
},
mounted: function() {
this.timer = setInterval(()=>{
// 动态改变黄色div的宽度
this.rate++
// 当然进度满格时，关闭定时器
if (this.rate >= 200) {
clearInterval(this.timer)
}
}, 150)
}
})
</script>
</body>
2、CSS样式参考如下
<head>
<style>
#app {
padding: 50px;
}
.progress {
width: 200px;
height: 30px;
background-color: rgba(87, 102, 141, 1);
border-radius: 15px;
overflow: hidden;
position: relative;
}
.rate {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(240, 145, 37);
width: 0;
}
.nums {
font-size: 16px;
width: 200px;
height: 30px;
line-height: 30px;
overflow: hidden;
box-sizing: border-box;
padding: 0 5px;
}
.nums div:first-child {
float: left;
}
.nums div:last-child {
float: right;
}
</style>
</head>
END !!!!
