elementui更改Slider 滑块颜色样式
elementui 颜色 样式 更改 滑块 slider
2023-09-27 14:22:17 时间
<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;
}
}
相关文章
- elementui更改导航栏样式
- elementui的el-tree第一次加载无法展开和选中的问题
- elementui 的tabs组件出现蓝色边框问题
- 去除elementUI中tab组件中的下划线
- ElementUI实现表格(table) 行上下移动的效果
- vue+node+elementUI实现分页功能
- Vue2使用v-model封装ElementUI_CheckBox组件
- 107.(前端)分类管理增加值实现——使用elementui中的动态编辑标签发送请求
- elementUI中使用radio和switch
- ElementUI 列表使用
- Vue + ElementUI的电商管理系统实例13 商品列表
- Vue + ElementUI的电商管理系统实例19 执行build命令期间移除所有的console
- Vue + ElementUI的电商管理系统实例17 顶部进度条效果
- Vue + ElementUI的电商管理系统实例07 权限列表
- elementui中自定义Select选择器样式自定义
- elementUI——z-index自增问题
- elementUI——table空单元格自动填充占位符,编辑后数据更新视图未更新问题