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 + Scss 動態(tài)切換主題顏色實現換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動態(tài)切換主題顏色實現換膚的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+element-ui集成隨機驗證碼+用戶名+密碼的form表單驗證功能
在登入頁面,我們往往需要通過輸入驗證碼才能進行登入,那我們下面就詳講一下在vue項目中如何配合element-ui實現這個功能,需要的朋友可以參考下2018-08-08

