<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; } }