element-UI组件el-button样式覆写 - 生效篇
踩坑：el-button样式覆写
表单代码参考：
<!-- 表单区域 -->
<div class="wd1200 form-container"><el-row :gutter="0"><el-col :span="12" class="bg1"><div id="form-cnt"><el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"><el-form-item label="手机号码"><el-input v-model="formLabelAlign.name" placeholder="请填写手机号码" clearable></el-input></el-form-item><el-form-item label="密码" class="pos-rel"><el-input class="father-clear" v-model="formLabelAlign.region" placeholder="请输入密码" clearable></el-input><el-button class="forget-btn" type="text" size="">忘记密码？</el-button></el-form-item></el-form><!-- 提交按钮 --><el-row class="mgt67"><el-button type="primary" class="sub-btn sub1">立即登录</el-button></el-row><el-row class="mgt23"><el-button type="primary" plain class="sub-btn sub2">没有账号？立即登录</el-button></el-row></div></el-col><el-col :span="12" class="bg2"> </el-col></el-row></div>
效果图对比 · 说明：
以login.vue页面为例：
- 使用
【代码1】，操作的覆写样式:hover和:active无变化效果； - 使用
【代码2】，操作的覆写样式:hover和:active效果正常； - （代码如下）
login.vue 旧代码：【代码1】
覆写后，操作 · 样式不生效
.el-button--primary.is-plain.sub2{color: #4194f6;background: none;border-color: #4194f6;}
.el-button--primary.is-plain.sub2:active {background: #3a8ee6;border-color: #3a8ee6;color: #FFF;}
login.vue 新代码：【代码2】
覆写后，操作 · 样式立刻生效
.sub2{color: #4194f6;background: none;border-color: #4194f6;}
.sub2:active {background: #3a8ee6;border-color: #3a8ee6;color: #FFF;}
以上就是关于“ element-UI组件el-button样式覆写 - 生效篇 ” 的全部内容。
element-UI组件el-button样式覆写 - 生效篇相关推荐
- Element UI 组件库分析和二次开发（一）
我的本地开发环境:M1 芯片Mac,node v12.22.10. 一.Element UI 组件库二次开发的大致流程 1. 从 Element 官方 clone 一份 dev 源码到本地 2. 安装 ...
- Element UI 在父类设置样式不起作用
Element UI 在父类设置样式不起作用!!!应该有人遇到这样子的问题了 如上图,想改变"修改"按钮的样式,但是发现 (1)直接修改样式不起作用, (2)给"修改元素 ...
- element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式 直接显示 首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页 可能会导致后端elk崩溃.项目最后要求 不能把 ...
- element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式 在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
- Element ui 组件中用键盘事件
//这是表单 <el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm&q ...
- vue修改config后怎么生效_vue组件中修改样式怎么不生效？
vue组件中修改样式怎么不生效?下面本篇文章给大家介绍一下vue组件修改样式不起作用的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue组件修改样式不起作用 需要在全局 ...
- Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...
- vue 使用lib-flexable，px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小，解决方案...
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
- 修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
最新文章
- 基于JSP/SERVLET学生管理系统
- Apache Kafka源码分析 – Log Management
- 成功解决cx_Freeze打包的时候出现importError:can not import name idnadata
- 基于vue的无缝滚动组件
- Mac端解决（含修改8.0.13版的密码）：Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)...
- 背景调查 跳槽_分享 | 录用背景调查，查的到底是什么？
- Linux as 5 下部署oracle 10.2.0.1（2）
- Software-Defined Networking (SDN) Definition-软件定义网络
- python 组合数_python – 查找两个数组元素的最大有效组合数
- php订单金额分摊算法,PHP付钱找钱算法
- 一、1.1 Kaggle中kernel技巧
- 传真SIP会话发起协议（SIP）
- echarts柱形图X轴Y轴相关配置
- Docker学习笔记之常用命令
- 设计模式|职责链模式--流程状态审批（枚举实现）
- 每天学命令deletePlaceBlockage
- 高通平台gpio调试
- 布斯(Booth)乘法
- 蓝桥杯历年试题汇总 C/C++ B组
- 【Python + selenium】在浏览器打开新页签