版权声明:本文为博主原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88710758
踩坑: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样式覆写 - 生效篇 ” 的全部内容。