文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vant中field组件label属性两端对齐问题及解决

2024-04-02 19:55

关注

field组件label属性两端对齐问题

最近在开发一个移动端的Web应用,使用vant构建移动端的页面,在构建表单时,使用Field组件作为信息输入和展示,但是但是由于对于label属性只提供了left、center、right的对齐方式,个人觉得不是很美观,希望能够显示两端对齐的效果。

先看看原来的四种效果 label左对齐

在这里插入图片描述

label居中对齐

在这里插入图片描述

label右对齐

在这里插入图片描述

label两端对齐

在这里插入图片描述

对比一下四种效果,个人还是比较倾向于第四种(两端对齐)的方式,下面说说实现的思路。

看看官方文档

在这里插入图片描述

文档中对月label-align属性只有三个可选值:left、center、right。

尝试直接设置label-align的属性为justify,发现是不可以的。

但是这里官方也是给出一个很好的解决思路,这里也是给出了label可以设置类名的配置,这里直接设置label-class的值为label-justify,然后在css中新建一个名为label-justify的类,并且设置text-align-last: justify;这样就可以设置label的值我两端对齐了,如果存在左右样式的问题,也可以在这个类中设置padding的值调整样式。这么简单就解决问题了。(其实在写文档前我找的是两个一个解决思路,那个思路可能更通用一点,面对其他的组件也更适用一点)。

另一种解决思路

其实虽然刚这块控件官方提供了一个label的类属性,可以直接设置,但是对于其他大多数控件来说,无论是label、icon和text,其实很多时候都是没有办法直接配置属性进行改变演示的。

例如van-tabbar-item中的icon图标就没有办法快捷改变图标大小了,其实有个很简单的办法:直接在开发者工具上查找出对应空间的样式类,然后才css中对该类进行样式的设置就可以了,这个方法适用于vant大多数空间,录入想改变field中label的样式,直接在css中新建一个.van-field__label类,然后修改其样式就可以,在譬如,需要修改van-tabbar-item中icon的属性,同样在css中新建一个.van-tabbar-item__icon类,然后修改器样式就可以。

小结:虽然自己解决这个问题的方式比较简单粗暴,也不知道是不是最优解,但是对于我来说,目前这个阶段还是能快速解决我的问题的,至于是否是最佳实践也希望各个路过刷到的朋友留个言,指导一下。

vant输入框label两端对齐

vue+vant

1.form表单中的代码,看起来有点累赘,是为了兼容ios系统

<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系统和Android系统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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯