<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 滑块颜色样式的更多相关文章

  1. Echarts中slider滑块调整样式

    今天遇到了一个问题,记录一下. 效果图. 原型图 一个页面中,引入了echarts的柱状图来动态显示数据,由于柱状图太高,echarts没有自动生成的滚动条,所以就用slider滑块手写了一个,但是效 ...

  2. WPF滑块控件(Slider)的自定义样式

    前言 每次开发滑块控件的样式都要花很久去读样式代码,感觉有点记不牢,所以特此备忘. 自定义滑块样式 首先创建项目,添加Slider控件. 然后获取Slider的Window样式,如下图操作. 然后弹出 ...

  3. Qt 样式表鼠标滑过按钮更改Text文本颜色

    QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...

  4. android:更改PagerTabStrip背景颜色,标题字体样式、颜色和图标,以及指示条的颜色

    1.更改PagerTabStrip背景颜色 我们直接在布局中设置background属性可以: <android.support.v4.view.ViewPager android:id=&qu ...

  5. easyUI slider滑块,在加载出来后,easyUI slider滑块禁用方法

    easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...

  6. 增加字体和颜色样式-------CSS

    通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-si ...

  7. 关于更改ListBox的ItemsPanel样式

    首先定义一个ListBoxItem的样式,用来显示相应的图片信息 <Style TargetType="{x:Type ListBoxItem}" > <Sett ...

  8. 表单(下)-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块

    EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...

  9. 使用CSS更改图标的颜色

    我们经常在很多网站上见到更改网站的主题时,图标的颜色也改变了,我们总是觉的这一项功能非常伟大,因为我们知道使用CSS是无法完成更改图片的颜色的.那么,网站上随心所欲的图标颜色是采用N多个图片不断的切换 ...

  10. WPF 仿IPhone滑块开关 样式 - CheckBox

    原文:WPF 仿IPhone滑块开关 样式 - CheckBox <Style x:Key="CheckRadioFocusVisual"> <Setter Pr ...

随机推荐

  1. 火山引擎 DataTester 首推 A/B 实验经验库,帮助企业高效优化实验设计能力

      更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎 DataTester 推出了重要功能--A/B 实验经验库. 基于在字节跳动已完成 150 万 ...

  2. Markdown 图片居中显示,增加图片说明

    <center> <img src="https://img2023.cnblogs.com/blog/80824/202308/80824-202308081307138 ...

  3. PPT 如何做出高大上的表格

    字不如表.表不如图 如何做 https://www.bilibili.com/video/BV1ha411g7f5?p=17

  4. js import的几种用法

    最近昨天公司小朋友离职,临时接收其负责的vue前端项目.vue好久没做了,很多东西都忘记或以前也没接触,几天开始慢慢写点vue的小知识,算是历程或备忘吧. import在js.ts中用了不知多少次,但 ...

  5. Qt 如何配置CLion标准控制台输出?

    CMake 相关问题: 即CMakeLists.txt文件中,在add_executable添加了WIN32.即当使用了WIN32标识后,就去掉了控制台,那么自然就没有信息打印出来了. # for e ...

  6. 【库函数】QT 中QString字符串的操作

    QString是QT提供的字符串类,相应的也就提供了很多很方便对字符串的处理方法.这里把这些对字符串的操作做一个整理和总结. 1. 将一个字符串追加到另一个字符串的末尾 QString str1 = ...

  7. SpringCloud学习 系列十、服务熔断与降级(2-方法级别服务降级)

    系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...

  8. iview+vue 加载进度条

    效果:浏览器最上方出现一个进度条. main.js import Vue from 'vue' import ViewUI from 'view-design'; import router from ...

  9. 【驱动】以太网扫盲(三)PHY的控制器驱动框架分析

    1. 概述 PHY芯片为OSI的最底层-物理层(Physical Layer),通过MII/GMII/RMII/SGMII/XGMII等多种媒体独立接口(介质无关接口)与数据链路层的MAC芯片相连,并 ...

  10. linux驱动开发中copy_from_user open read write等常用函数总结

    目录 open read write copy_to_user copy_from_user open 函数定义: int open( const char * pathname, int flags ...