vant
vant copied to clipboard
[Bug Report] Row在设置垂直间距后,如果Col不设置span属性,垂直间距不会生效
重现链接
https://stackblitz.com/edit/vitejs-vite-ppsibz?file=src%2Fcomponents%2FHelloWorld.vue
Vant 版本
^4.9.1
描述一下你遇到的问题。
现象
Row在设置垂直间距gutter=[20, 20]后,如果内层的Col不设置span属性,垂直间距不会生效。
此功能不能覆盖的场景
虽然设置了span会出现垂直间距,但是不能满足很多场景,比方在我的例子1中,如果button的文字长度过长,可能会出现换行或者文字溢出。
期望
我期望的场景如例子2,使用者或许并不关注或者不知道col内元素的宽度,他只关注内个元素的垂直间距和水平间距,设置了gutter=[20, 20]属性,却没有生效。
个人理解
我看了源码中这个地方的实现逻辑,你们是通过children的span属性来计算会不会产生换行,如果换行,会在上一行添加垂直间距。这种做法很贴心,我猜想你们这样做是为了避免在只有一行的情况下出现下边距避免一些布局上的问题,但是如果使用者真的希望如此,那他可以不设置垂直间距。既然设置了gutter=[20, 20],那么每个元素的垂直间距都应该是20。本质上这个由使用者自己来决定,所见即所得。而不是一些贴心的隐藏逻辑,且文档也没有明确说明,这会对使用者造成一定困扰,这与我理解的组件设计理念有点差异。
重现步骤
- 在例子中初始化即可复现
- 如果没有出现换行,可以改变浏览器视窗宽度大小
设备/浏览器
web h5都可以,只要出现换行