field組件label屬性兩端對齊問題

最近在開發(fā)一個移動端的Web應用，使用vant構建移動端的頁面，在構建表單時，使用Field組件作為信息輸入和展示，但是但是由于對于label屬性只提供了left、center、right的對齊方式，個人覺得不是很美觀，希望能夠顯示兩端對齊的效果。

先看看原來的四種效果 label左對齊

label居中對齊

label右對齊

label兩端對齊

對比一下四種效果，個人還是比較傾向于第四種（兩端對齊）的方式，下面說說實現(xiàn)的思路。

看看官方文檔

文檔中對月label-align屬性只有三個可選值：left、center、right。

嘗試直接設置label-align的屬性為justify，發(fā)現(xiàn)是不可以的。

但是這里官方也是給出一個很好的解決思路，這里也是給出了label可以設置類名的配置，這里直接設置label-class的值為label-justify,然后在css中新建一個名為label-justify的類，并且設置text-align-last: justify;這樣就可以設置label的值我兩端對齊了，如果存在左右樣式的問題，也可以在這個類中設置padding的值調(diào)整樣式。這么簡單就解決問題了。（其實在寫文檔前我找的是兩個一個解決思路，那個思路可能更通用一點，面對其他的組件也更適用一點）。

另一種解決思路

其實雖然剛這塊控件官方提供了一個label的類屬性，可以直接設置，但是對于其他大多數(shù)控件來說，無論是label、icon和text，其實很多時候都是沒有辦法直接配置屬性進行改變演示的。

例如van-tabbar-item中的icon圖標就沒有辦法快捷改變圖標大小了，其實有個很簡單的辦法：直接在開發(fā)者工具上查找出對應空間的樣式類，然后才css中對該類進行樣式的設置就可以了，這個方法適用于vant大多數(shù)空間，錄入想改變field中l(wèi)abel的樣式，直接在css中新建一個.van-field__label類，然后修改其樣式就可以，在譬如，需要修改van-tabbar-item中icon的屬性，同樣在css中新建一個.van-tabbar-item__icon類，然后修改器樣式就可以。

小結(jié)：雖然自己解決這個問題的方式比較簡單粗暴，也不知道是不是最優(yōu)解，但是對于我來說，目前這個階段還是能快速解決我的問題的，至于是否是最佳實踐也希望各個路過刷到的朋友留個言，指導一下。

vant輸入框label兩端對齊

vue+vant

1.form表單中的代碼，看起來有點累贅，是為了兼容ios系統(tǒng)

<van-field
  v-model="username"
  name="username"
  placeholder="請輸入姓名"
  label-width="5.2em"
>
  <!-- 使用label插槽 -->
  <template #label>
    <!-- 自定義樣式label-flex -->
    <div class="label-flex">
      <div class="label-justify">姓名</div>
      ：
    </div>
  </template>
</van-field>

2.scss樣式

//兼容ios系統(tǒng)和Android系統(tǒng)label兩端對齊
<style lang="scss">
.label-flex{
  display: flex;
  height: 20px;//高度必須設置
  overflow: hidden;
  .label-justify{
    flex: 1;
    text-align: justify;
    text-align-last: justify;
    &::after{
      content: "";
      width: 100%;
      display: inline-block;
      height: 0;
    }
  }
}
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論