基于element-UI input等組件寬度修改方式

更新時(shí)間：2023年03月17日 14:16:04 作者：chihaihai

這篇文章主要介紹了基于element-UI input等組件寬度修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-UI input等組件寬度修改

剛接觸VUE的時(shí)候也傻傻的直接在組件上設(shè)置height和line-height值妄圖改變輸入框的寬度，可是發(fā)現(xiàn)這種方法并不可行。

想要修改當(dāng)前頁(yè)面組件樣式且為了避全局免污染需要進(jìn)行穿透。

舉個(gè)很簡(jiǎn)單的例子：

.input1 ?>>> .el-input__inner {
? ? height: 3vw;
? ? line-height: 3vw;
? }

這樣就可以在input1上控制input的樣式。

vue element-ui修改form表單的el-input的寬度，el-select的寬度

自從用了element-ui,確實(shí)好用，該有的組件都有，但是組件間的樣式都固定好了，有時(shí)候像form表單這樣，頁(yè)面的input、select等寬度不一定會(huì)是一樣的，可能有些長(zhǎng)，有些短，這時(shí)候改變這些控件的寬度就有點(diǎn)麻煩了。

看了網(wǎng)上的好多文章，都沒(méi)有找到解決方案，很多都說(shuō)在el-input里面加width,但是效果不好，簡(jiǎn)單總結(jié)一下這個(gè)

1.例如我想要這種效果，把描述和郵箱都的寬度width設(shè)置長(zhǎng)一點(diǎn)

2.首先在el-select里面增加style=“width:500px”，發(fā)現(xiàn)沒(méi)有效果，為什么呢，因?yàn)樵趀lment里面固定好了控件的樣式，el-input里面增加style="width:500px"會(huì)有效果，但是我覺得更好的做法是利用css樣式優(yōu)先級(jí)，覆蓋原來(lái)的element的css來(lái)處理。

3.我們調(diào)試一下頁(yè)面，看看是那個(gè)css樣式影響了寬度,可以看到.el-form–inline div.el-input固定為156px

4.利用css的樣式優(yōu)先級(jí)，我們?cè)诋?dāng)前的頁(yè)面再寫一個(gè)自定義的class,我們首先定義一個(gè)當(dāng)前頁(yè)面的css，然后在這個(gè)頁(yè)面里面重寫css覆蓋剛剛的頁(yè)面樣式，這樣就不會(huì)影響到別的頁(yè)面樣式，

具體做法：

定義一個(gè)當(dāng)前頁(yè)面樣式user_info_page，
設(shè)置當(dāng)前控件的樣式descClass，
在style的descClass樣式里面重寫這個(gè)el-select樣式的寬度width

可以看到這樣設(shè)置之后，el-input或者el-select的寬度就變長(zhǎng)了

注：

1.style lang="less"才可以在一個(gè)css里面再設(shè)置css樣式

2.這里的width沒(méi)有用百分比，會(huì)帶來(lái)新的坑，屏幕小的，頁(yè)面可能會(huì)變形，百分比這個(gè)也可以（有空補(bǔ)上），但是可以把el-col的span設(shè)置大一點(diǎn)，優(yōu)化布局，使之減少變形的可能