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 ...
随机推荐
- why哥这里有一道Dubbo高频面试题,请查收。
这是why的第 64 篇原创文章 荒腔走板 大家好,我是 why,欢迎来到我连续周更优质原创文章的第 64 篇.老规矩,先荒腔走板聊聊其他的. 上面这图是我之前拼的一个拼图. 我经常玩拼图,我大概拼了 ...
- Python pdf 转 图片
安装依赖 D:\OpenSource\Python>pip install pdf2image pillow -i https://pypi.tuna.tsinghua.edu.cn/simpl ...
- 以 Golang 为例详解 AST 抽象语法树
前言 各位同行有没有想过一件事,一个程序文件,比如 hello.go 是如何被编译器理解的,平常在编写程序时,IDE 又是如何提供代码提示的.在这奥妙无穷的背后, AST(Abstract Synta ...
- Python pickle 二进制序列化和反序列化 - 数据持久化
模块 pickle 实现了对一个 Python 对象结构的二进制序列化和反序列化. "pickling" 是将 Python 对象及其所拥有的层次结构转化为一个字节流的过程,而 & ...
- 语音顶会 ICASSP 2022 成果分享:基于时频感知域模型的单通道语音增强算法
近日,阿里云视频云音频技术团队与新加坡国立大学李海洲教授团队合作论文 <基于时频感知域模型的单通道语音增强算法 >(Time-Frequency Attention for Monaura ...
- 【Logging 日志库】Cpp 日志库 boost::log 以及 glog 的对比
日志能方便地诊断程序原因.统计程序运行数据,是大型软件系统必不可少的组件之一.本文将从设计上和功能上对比 C++ 语言常见的两款日志库: boost::log 和 google-glog . 设计 b ...
- Redis 内存优化在 vivo 的探索与实践
作者:vivo 互联网服务器团队- Tang Wenjian 一. 背景 使用过 Redis 的同学应该都知道,它基于键值对(key-value)的内存数据库,所有数据存放在内存中,内存在 Redis ...
- Java23种设计模式学习笔记
创建型模式:关注对象的创建过程 1.单例模式: 保证一个类只有一个实例,并且提供一个访问该实例的全局访问点 主要: 饿汉式(线程安全,调用效率高,但是不能延时加载) 懒汉式(线程安全,调用效率不高, ...
- vue.draggable中文文档
http://www.itxst.com/vue-draggable/fiamvqam.html https://blog.csdn.net/a772116804/article/details/10 ...
- Liunx常用操作(七)-文件上传下载方法
如下介绍了几个比较方便的liunx软件的文件维护方法 一.SZ,RZ liunx服务器上安装 通过apt来安装z.sz:安装后直接上传下载文件 apt-get install lrzsz 用法: # ...