elementui更改Slider 滑块颜色样式
<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更改Slider 滑块颜色样式的更多相关文章
- Echarts中slider滑块调整样式
今天遇到了一个问题,记录一下. 效果图. 原型图 一个页面中,引入了echarts的柱状图来动态显示数据,由于柱状图太高,echarts没有自动生成的滚动条,所以就用slider滑块手写了一个,但是效 ...
- WPF滑块控件(Slider)的自定义样式
前言 每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式 首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出 ...
- Qt 样式表鼠标滑过按钮更改Text文本颜色
QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...
- android:更改PagerTabStrip背景颜色,标题字体样式、颜色和图标,以及指示条的颜色
1.更改PagerTabStrip背景颜色 我们直接在布局中设置background属性可以: <android.support.v4.view.ViewPager android:id=&qu ...
- easyUI slider滑块,在加载出来后,easyUI slider滑块禁用方法
easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...
- 增加字体和颜色样式-------CSS
通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-si ...
- 关于更改ListBox的ItemsPanel样式
首先定义一个ListBoxItem的样式,用来显示相应的图片信息 <Style TargetType="{x:Type ListBoxItem}" > <Sett ...
- 表单(下)-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块
EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...
- 使用CSS更改图标的颜色
我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用CSS是无法完成更改图片的颜色的.那么,网站上随心所欲的图标颜色是采用N多个图片不断的切换 ...
- WPF 仿IPhone滑块开关 样式 - CheckBox
原文:WPF 仿IPhone滑块开关 样式 - CheckBox <Style x:Key="CheckRadioFocusVisual"> <Setter Pr ...
随机推荐
- 一起玩转LiteOS组件:Pixman
摘要:本文将以Pixman Demo为例,详细说明Pixman的功能. 本文分享自华为云社区<LiteOS组件尝鲜-玩转Pixman>,作者:Lionlace. 基本介绍 Pixman是由 ...
- 空间数据库基础理论 GIS空间数据处理分析涉及的基本概念
<空间数据库>课程整理汇总,106篇课程,内容太长,学习中,把一些关键点,汇总记下笔记 地理空间 GIS中的地理空间(Geo-spatial)是指经过投影变换后,在笛卡尔坐标系中的地球表层 ...
- 大数据 - DWD&DIM 业务数据
业务数据的变化,我们可以通过 FlinkCDC 采集到,但是 FlinkCDC 是把全部数据统一写入一个 Topic 中, 这些数据包括事实数据,也包含维度数据,这样显然不利于日后的数据处理,所以这个 ...
- Nacos 1.2.1 集群搭建(三) Nginx 配置 集群
配置 Nginx 可以把.conf 文件拉到本地,配置好再传上去 #gzip on; upstream cluster{ server 192.168.0.113:8848; server 192.1 ...
- 【Docker】容器操作 mysql部署 redis部署 nginx部署 迁移与备份 Dockerfile
目录 上节回顾 今日内容 1 容器操作 2 应用部署 2.1 mysql 部署 2.2 redis 2.3 nginx 3 迁移与备份 4 Dockerfile 练习 上节回顾 # 1 docker ...
- c中常用的字符串操作
c中常用的字符串操作 头文件:<string.h> 1.strchr()查找某字符在字符串中首次出现的位置 strchr() 用来查找某字符在字符串中首次出现的位置,其原型为: char ...
- 2016年第七届 蓝桥杯B组C/C++ 决赛题解
1.一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里. 矿车停在平直的废弃的轨道上. 他的面前是两个按钮,分别写着"F"和"B". 小明突然记起来,这 ...
- P2241
这么多年不写代码,竟然忘了longlong这茬,我半天没想明白错在哪里,过了好久才反应过来.浪费不少时间,真的得记住longlong 啊.... Code #include <iostream& ...
- TortoiseSVN 中文手册下载
TortoiseSVN 链接:https://pan.baidu.com/s/1wAxZST9wKc_HebOrBiewjw 提取码:3gjq
- 用线性二次模型建模大型数据中心,基于 MPC 进行冷却控制
目录 一个总述 reviews 0 abstract 1 intro 2 related work 3 DC cooling(问题定义) 4 MPC(method) 4.1 Model structu ...