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 ...
随机推荐
- Git 工具 - 子模块: submodule与subtree的使用
git日常使用中,基本都是一个项目一个Git仓库的形式,那么当我们的代码中碰到了业务级别的需要复用的代码,我们一般怎么做呢? 比如:某个工作中的项目需要包含并使用另一个项目. 也许是第三方库,或者你独 ...
- 超详细的 Jenkins 安全tips
Jenkins 作为一个开放的.可定制的平台,即使在默认状态下也提供了不错的安全性.但是鉴于 Jenkins 连接了许多行业工具,因此也存在一定安全隐患.本篇文章将会介绍一些方法和工具,来确保 Jen ...
- 火山引擎VeDI落地消费行业数据飞轮,提出“四更”新主张
7月6日,火山引擎数智平台(VeDI)<全链路增长:数据飞轮转动消费新生力>主题活动在北京举办,会上分享了行业.企业.产品视角下的数据飞轮实践,并针对消费行业提出业务应用"四更& ...
- 火山引擎DataTester:企业如何使用A/B实验优化商业化能力
商业化是企业将研发成果,如新产品.新技术.新服务等,转变成可盈利的商业化产品:整个流程中包含了研发.推广.服务,全程通过精细化管理运营.商业化的本质是流量的变现,而对企业而言,商业化链路的打磨至关 ...
- 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0 (Ⅳ)
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...
- GitLab--简单使用
1 创建项目组 项目组说明 Private 私有 只有所有者 组内成员或已分配的用户有查看权限(同GitHub收费版的私有仓库) Internal 内部 拥有GitLab账号的成员可以查看 无账号用户 ...
- Markdown 语法:高级技巧
Markdown 高级技巧 支持的 HTML 元素 不在 Markdown 涵盖范围之内的标签,多可以直接在文档里面用 HTML 撰写. 目前支持的 HTML 标签有 <kbd>,< ...
- 国内使用 Mac OS 快速安装 Homebrew
问题描述 使用新的 Mac 电脑开发,没有安装 Homebrew 确实不行,但是国内访问 github,很不稳定,运行 /bin/bash -c "$(curl -fsSL https:// ...
- AtCoder Beginner Contest 176 (ABC水题,D题01BFS,E数组处理)
补题链接:Here A - Takoyaki 很容易看出 \(\frac{N + X - 1}{X} \times T\) B - Multiple of 9 给定一个很大的整数,问其是否是 \(9\ ...
- 传统与现代可视化 PK:再生水厂二维工艺组态系统
前言 随着可视化技术的进步与发展,传统再生水厂组态系统所展示的组态页面已逐渐无法满足当前现阶段多样化的展示手段.使得系统对污泥处理处置及生产运行成本方面的监控.分析方面较为薄弱,急需对信息化应用成果和 ...