修改Element Slider 滑塊 label選中樣式 (自定義 Elementui Slider 滑塊 樣式)
效果圖:
1,加入slider滑塊代碼
<el-slider v-model="level" vertical :show-stops="true" :show-tooltip="false" :step="1" :min="0" :max="45" :marks="marks1h" @change="changeValue" :format-tooltip="formatTooltip" > </el-slider>
2,定義formatTooltip方法
formatTooltip(val) { /* 自定義mask文字顏色 */ const customClassValue = document.getElementsByClassName( "el-slider__marks-text" ); for (let i = 0; i < customClassValue.length; i++) { customClassValue[i].style.color = "#ffff"; /* 改變顏色 */
//如果val等于v-model綁定的值就給他設置成黃色,否則就是白色 if (val == this.level) { customClassValue[this.level].style.color = "#FFD614"; } else { customClassValue[i].style.color = "#fff"; } } },

浙公網安備 33010602011771號