elementui更改Slider 滑塊顏色樣式
阿新 • • 發佈:2020-12-24
<div class="con-slider"> <el-slider :disabled="disabledFlag" @change="lastContValue" class="demo-slisder" v-show="Hide" v-model="value2"> </el-slider> </div> export default { data(){ return{ value2:"", disabledFlag:false,//true,//禁止使用; false 可以使用 } }, methods:{ // 值改變時觸發(使用滑鼠拖曳時,只在鬆開滑鼠後觸發) lastContValue(){ console.log(this.value2) }, } }
.con-slider{ //定位操作,你可以不需要 position: absolute; top: -80px; .demo-slisder{ // 垂直方向上居中 display: flex; align-items: center; // 間距(左右) padding-left: 22px; padding-right: 26px; box-sizing: border-box; width: 288px; height: 94px; background: #ffffff; box-shadow: 0px 9px 28px 8px rgba(0,0,0,0.05), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 3px 6px -4px rgba(0,0,0,0.12); } // 控制滑塊的預設顏色 /deep/ .el-slider__bar{ background: #007AFF; } }