vue改变elementUI中el-slider中默认样式，显示数值或文字，改变文字颜色

不想学习只想玩_前端,html,css-CSDN博客

改变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'