改变el-slider中默认样式
通过deep对需要更改的样式进行更改
:deep(.el-slider__bar) {
background-color: #00BBFF;
}
:deep(.el-slider__button) {
border: 4px solid #167FFF;
opacity: 0.6;
background-color: #FFFFFF;
/* 测试 */
margin-left: 5px;
}
:deep(.el-slider__marks-text) {
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
font-size: 17px;
}
:deep(.el-slider) {
width: 190px;
height: 6px;
position: relative;
top: -14px;
left: 2px;
}
显示数值或文字
data(){
return{
weather: {
0: {
style: {
color: '#00BBFF',
fontWeight: 'bold',
},
label: '晴', //设置需要显示的文字内容或者是数值
},
10: {
style: {
color: '#fff',
fontWeight: '400'
},
label: '雨',
},
// 20: {
// style: {
// color: '#fff',
// fontWeight: '400'
// },
// label: '云',
// },
20: {
style: {
color: '#fff',
fontWeight: '400'
},
label: '雪',
},
30: {
style: {
color: '#fff',
fontWeight: '400'
},
label: '雾',
}
},
}
}
改变文字颜色
//value1是slider绑定的数值
this.weather[this.value1].style.color = '#00BBFF'
this.weather[this.value1].style.fontWeight = 'bold'