field組件label屬性兩端對(duì)齊問題

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

先看看原來的四種效果 label左對(duì)齊

label居中對(duì)齊

label右對(duì)齊

label兩端對(duì)齊

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

看看官方文檔

文檔中對(duì)月label-align屬性只有三個(gè)可選值：left、center、right。

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

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

另一種解決思路

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

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

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

vant輸入框label兩端對(duì)齊

vue+vant

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

<van-field
  v-model="username"
  name="username"
  placeholder="請(qǐng)輸入姓名"
  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兩端對(duì)齊
<style lang="scss">
.label-flex{
  display: flex;
  height: 20px;//高度必須設(shè)置
  overflow: hidden;
  .label-justify{
    flex: 1;
    text-align: justify;
    text-align-last: justify;
    &::after{
      content: "";
      width: 100%;
      display: inline-block;
      height: 0;
    }
  }
}
</style>

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

最新評(píng)論