vue.js 如何在所有qInput组件上强制自动设置底部空格?

2ledvvac  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(157)

考虑一个有几个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 ,总是保留底部空间,无论如何。
我是不是错过了另一种方法?

wljmcqd8

wljmcqd81#

尝试将bottom-slots prop添加到所有输入,或者只添加 * 而不添加 * 提示或验证,以保留输入下方的额外空白空间。

bottom-slots:Boolean

启用底部插槽('错误','提示','计数器')

<q-input label="One" :rules="[val => !!val || 'required'" />
<q-input bottom-slots  label="Two" />
<q-input label="Three" hint="This is some helpful information" />
<q-input bottom-slots  label="Four" />

字符串

相关问题