考虑一个有几个q-input组件的表单,其中一些有规则和/或提示,而另一些没有:
<q-input label="One" :rules="[val => !!val || 'required'" />
<q-input label="Two" />
<q-input label="Three" hint="This is some helpful information" />
<q-input label="Four" />
字符串
qInput(和qSelect等)组件会自动在输入下保留空间,这些输入包含潜在的错误信息或提示,而不会为其他输入保留空间。这会导致布局不均匀。
一种解决方案是为所有输入添加hide-bottom-space,但这会导致整个表单在显示和隐藏错误时上下移动。此外,自动空格实际上可以实现一个很好的布局,只要它是一致的。
我目前的解决方法是在每个输入中添加hint=”“,否则不会获得空间。但这感觉很笨拙,对未来的维护者来说看起来很奇怪(所以我最后还添加了注解来解释它,这更混乱)。
我一直希望有一个像力底部空间 prop ,总是保留底部空间,无论如何。
我是不是错过了另一种方法?
1条答案
按热度按时间wljmcqd81#
尝试将
bottom-slots
prop添加到所有输入,或者只添加 * 而不添加 * 提示或验证,以保留输入下方的额外空白空间。bottom-slots:Boolean
启用底部插槽('错误','提示','计数器')
字符串