效果图:
代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 进度条评论功能</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
<style>
.box {
position: relative;
width: 300px;
height: 30px;
border-radius: 15px;
background-color: #eeeeee;
}
.box-list {
display: flex;
}
.list-item {
z-index: 99;
flex: 1;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #000000;
}
.bg {
z-index: 9;
position: absolute;
left: 0;
top: 0;
height: 30px;
border-radius: 15px;
background: linear-gradient(to right, rgba(255, 105, 182), rgba(250, 52, 51));
// 设置进度的颜色为渐变色
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="box-list">
<div
class="list-item"
v-for="(item,index) in 10"
key="index"
@click="handleClick(item)"
:style="{ color: getColor(item) }"
>{{item}}</div>
</div>
<div class="bg" :style="bgStyle"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>进度条评论功能</h1>',
bgStyle: {width: item * 300 + 'px'},// 设置默认进度为10
selectedNumber:null,
},
methods: {
getColor(item) {
return this.selectedNumber && this.selectedNumber >= item ? '#fff' : 'black';
// 从1到当前点击的数字进度条下方的文字设置为白色,从当前点击的数字到10部分的字体设置为黑色
},
handleClick(item) {
console.log(item);
this.bgStyle = { width: item * 30 + 'px'};
this.selectedNumber = item; // 把当前点击数字赋值给selectedNumber
}
}
})
</script>
</body>
</html>