vue如何修改el-form-item中的label樣式修改問題
更新時(shí)間：2023年10月17日 09:11:10 作者：__十七
這篇文章主要介紹了vue如何修改el-form-item中的label樣式修改問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
修改el-form-item中的label樣式修改
操作步驟
1，style標(biāo)簽中不要加scoped
2，在對(duì)應(yīng)的el-form-item的label標(biāo)簽屬性中加入class屬性
3，在style標(biāo)簽中，先找到label對(duì)應(yīng)的class，在修改label
<el-form-item label="用戶名" class="item">
<el-input v-model="ruleForm.username" placeholder="請(qǐng)輸入用戶名" maxlength="10"></el-input>
</el-form-item>
<style lang="less">
.item .el-form-item__label{
color: blake;
}
</style>
vue使用elementUI form表單label樣式修改
1.刪除style標(biāo)簽中的 scoped 屬性
<style lang="lang" scoped>
...
</style>2.在對(duì)應(yīng)el-form-item的label屬性中加入class樣式
<el-form-item label="用戶名" class="item">
<el-input v-model="ruleForm.username" placeholder="請(qǐng)輸入用戶名" maxlength="10"></el-input>
</el-form-item>3.審查元素，找到label對(duì)應(yīng)的class
如：.el-form-item__label 添加如下樣式代碼
.item .el-form-item__label{
color: wheat;
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
京東 Vue3 組件庫支持小程序開發(fā)的詳細(xì)流程
這篇文章主要介紹了京東 Vue3 組件庫支持小程序開發(fā)的詳細(xì)流程，通過引入NutUI，即可在項(xiàng)目中使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-06-06
Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue請(qǐng)求后端數(shù)據(jù)和跨域問題解決
這篇文章主要介紹了vue請(qǐng)求后端數(shù)據(jù)和跨域問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
下面小編就為大家分享一篇iview中Select 選擇器多選校驗(yàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
一文帶你搞懂Vue.js如何實(shí)現(xiàn)全選反選功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)全選反選功能的相關(guān)知識(shí),文中是示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2025-01-01
這篇文章主要介紹了Vue3組件的開發(fā)，上一篇文章我們價(jià)紹了Vue3（三）網(wǎng)站首頁布局開發(fā)，今天繼續(xù)上篇內(nèi)容展開組件的開發(fā),需要的朋友可以參考一下2021-11-11
vue/cli3.0腳手架部署到nginx時(shí)頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時(shí)頁面空白的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue CLI 2.x搭建vue(目錄最全分析),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue+element-ui集成隨機(jī)驗(yàn)證碼+用戶名+密碼的form表單驗(yàn)證功能
在登入頁面，我們往往需要通過輸入驗(yàn)證碼才能進(jìn)行登入，那我們下面就詳講一下在vue項(xiàng)目中如何配合element-ui實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2018-08-08