Vant cell 自定义title和value宽度(van-cell宽度问题)

9,770 阅读1分钟

总结(不想看下面内容的):修改min-width即可,修改widthmax-width都没用。

案例:

<van-cell
    icon="location-o"
    :title="data.address.location"
    value="更改地址"
    is-link
    title-style="width:5rem;"
    :label="data.address.name+' '+data.address.phone"/>

vant官方文档中指出使用title-stylevalue-style可以修改单元格的标题样式和值的样式,也就是左边文字的样式和右边文字的样式。通过title-classvalue-class增加额外的标题样式和值样式。

但是当上面这样写之后发现宽度并没有改变,如图:

image.png

直到看到这篇博客才终于找到问题: CSDN 【动心.】的文章:《van-cell宽度问题》

其中提到了解决的方法如图:

image.png

再次修改刚才的案例代码,指定min-width

<van-cell
    icon="location-o"
    :title="data.address.location"
    value="更改地址"
    is-link
    title-style="min-width:5rem;"
    :label="data.address.name+' '+data.address.phone"/>

之后终于宽度发生了改变,终于修改成功,并且测试发现,必须指定min-width宽度才会发生改变,单独指定width或者max-width都不会让宽度发生改变: image.png