vue如何修改el-form-item中的label样式修改问题
更新时间:2023年10月17日 09:11:10 作者:__十七
这篇文章主要介绍了vue如何修改el-form-item中的label样式修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
修改el-form-item中的label样式修改
操作步骤
1,style标签中不要加scoped
2,在对应的el-form-item的label标签属性中加入class属性
3,在style标签中,先找到label对应的class,在修改label
<el-form-item label="用户名" class="item">
<el-input v-model="ruleForm.username" placeholder="请输入用户名" maxlength="10"></el-input>
</el-form-item>
<style lang="less">
.item .el-form-item__label{
color: blake;
}
</style>
vue使用elementUI form表单label样式修改
1.删除style标签中的 scoped 属性
<style lang="lang" scoped>
...
</style>2.在对应el-form-item的label属性中加入class样式
<el-form-item label="用户名" class="item">
<el-input v-model="ruleForm.username" placeholder="请输入用户名" maxlength="10"></el-input>
</el-form-item>3.审查元素,找到label对应的class
如:.el-form-item__label 添加如下样式代码
.item .el-form-item__label{
color: wheat;
}总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue/cli3.0脚手架部署到nginx时页面空白的问题及解决
这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能,需要的朋友可以参考下2018-08-08


最新评论