目錄

前言：

痛點：

1.左對齊，右對齊在中文和外語情況下字數不同，固定寬度會使名稱換行，不在整行對齊，影響美觀。

2.如果名稱和輸入框不在一行，會使頁面越來越長

3.label-width值給變量，根據語言顯示不同寬度，語言很多時寬度設定困難

解決：

添加樣式：（如果在vue項目中，外面可以包一層class,這樣不影響其他頁面的樣式）

總結：

以上就是今天的分享，歡迎關注我，點贊評論！~

---

前言：

基于vue2+element-ui+i18n開發的項目，最近發現一個痛點，就是表單在切換多語言時會有錯亂。

痛點：

1.左對齊，右對齊在中文和外語情況下字數不同，固定寬度會使名稱換行，不在整行對齊，影響美觀。

2.如果名稱和輸入框不在一行，會使頁面越來越長

官網API中推薦使用表單的名稱和輸入框換行展示：

但是這就造成頁面會出現豎向滾動條，頁面會拉出，也有點不友好。

3.label-width值給變量，根據語言顯示不同寬度，語言很多時寬度設定困難

也有人根據不同語言，設置不同的寬度，做成變量，根據語言再做切換改變，

比如官網中文設置寬度80px,英文下設置100px,這樣也不友好，如果動態添加語言，有些阿拉伯語呀，西班牙語，烏克蘭語呀，這個寬度是不可控的。

解決：

為了解決以上痛點，對，官網UI加了層改造，這樣就能保證某個語言顯示排版對齊的情況下，其他文字長的，也不會拐彎顯示拖垮了。

超出就會往后擠，沒超過則還是對齊的效果。

添加樣式：（如果在vue項目中，外面可以包一層class,這樣不影響其他頁面的樣式）

.el-form-item{display: flex;flex-direction: row;
}
.el-form-item__label{width: auto!important;min-width:100px;white-space: nowrap;padding-left: 15px;position: relative;
}
.el-form-item__label:before{position: absolute;left: 5px;top: 2px;
}
.el-form-item__content{margin-left: 10px!important;width: calc(100% - 100px);flex: 2;
}

總結：

解決這種樣式問題，關鍵的樣式：

父級：display:flex;flex-direction:row;

名稱：min-width:100px;white-space:nowrap;padding-left:15px;

輸入框：width:calc(100% - 100px);flex:2;

以上就是今天的分享，歡迎關注我，點贊評論！~