Vue ElementUI el-switch 改变圆形按钮的颜色

最新推荐文章于 2024-03-23 10:41:03 发布
最新推荐文章于 2024-03-23 10:41:03 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： 《ElementUI 基础知识》 文章标签： elementui Switch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/124133339
版权

el-switch 
开关可以通过属性改变关闭和打开的背景色，但无法改变圆形的默认颜色，可以这样设置：

/* 改变默认为白色的圆形 */
.el-switch .el-switch__core:after {
    background:#0e3062;
}

修改前

 

修改后

 

AvatarGiser
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
el-switch动态修改颜色方法
我爱美女S的博客
03-09 2135
可以看到那个span有个类名，可以用常用的通过类名获取元素的方式获取那个span标签，然后就可以动态地修改el-switch的颜色了。但是getElementsByClassName只能选中某一个，所以得开发者想办法对应上。 至少，是可以动态修改一个el-switch的颜色了。 ...
elementUI switch修改样式
weixin_43368335的博客
11-07 3267
先来图 再来代码 <el-form-item label="状态：" prop="activestate"> <el-switch v-model="Form.activestate" :validate-event="true" active-text="使用" inactive-text="禁用" :width="54" ...
自定义 ElementUI el-button按钮颜色
最新发布
ssxx_zzyy_baba的博客
03-23 1594
所以在这里使用可以直接用类名。因为我们之前定义的类名就是。
el-switch
qq_50276105的博客
11-25 7351
2、如果说你要用id值来判断是否要把开关禁用，那么是无法达到目的的，因为在项目中，开关是开的时候，id传入"a"值 ，开关是关的时候，id被传入"b"值。根据其先改后传的特点，就无法达到禁用的效果了。1、如果此时开关是开着的，也就是说id值是"a"，那么当我们出发change事件的时候，传过去的id值是关闭的“b”值。3、在判断是否会被禁用中，可以选择其他的字段来做判断。
修改element-ui中的switch样式。
qq_54135019的博客
08-15 926
3、当我们通过将active-text和inactive-text的值和颜色的值交换可以达到第一步的效果。1、不对active-text和inactive-text，以及--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949的值交换。2、在style中加入如下样式,主要是通过样式穿透改变switch原有的css样式。2、switch中的样式为如下。可以发现在启用的时候应该为绿色，禁用的时候应该为红色才对。1、如下为将要实现的ui样式。
el-switch 动态绑定想要的值
xiaokangna的博客
07-01 3842
/如果后端返回给你的数据不是true和false或者是1和2动态绑定怎么做/
《Element-UI Switch之动态绑定》
杨晓风 迷迭香的记忆
07-04 6293
前言： 根据Element-UI的官网对Switch开关进行使用，可是发现却不起作用，接下来看小编是如何来斩妖除魔的吧 正文： 首先，Switch的开关控制，官网提供有三种数据类型：boolean / string / number 所以出现Switch开关没有正确的效果，第一要考虑双向绑定数据类型的问题 其次，官网提供的实...
Vue ElementUI el-select 图片选择效果
02-24
基于 Vue2.x，对 ElementUI el-select 做图片选择效果。项目说明可参见：https://blog.csdn.net/sinat_31213021/article/details/129195721
elementUi vue el-radio 监听选中变化的实例代码
01-19
elementUi vue el-radio 监听选中变化的实例代码如下所述： //change是radio-group标签的事件 <el v-model=radioSex change=changeHandler> <el class=radio label=man>男</el> <el class=radio label=woman>女...
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，...
vue+el-table制作岗位排班表
04-13
vue+el-table制作岗位排班表
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
Vue的el-scrollbar实现自定义滚动
09-20
本篇文章给大家分享了Vue的el-scrollbar实现自定义滚动实现的过程和实例代码，对此有需要的朋友可以参考下。
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue elementui el-image 跨域text plain
05-13
如果你想在 Vue 中使用 Element UI 的 el-image 组件加载跨域的 text/plain 类型的图片，需要在服务器端设置响应头部，允许跨域访问。你可以在服务器端的响应头部中添加 Access-Control-Allow-Origin:*，来允许所有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值