我將q-input與下面的代碼一起使用（我使用了 Quasar v2.0.4）：
<q-input
filled
outlined
square
dense
clearable
v-model="vModel"
:rules="[(val) => (val && val.length > 0)]"
/>
然后，在瀏覽器上重新撰寫后，添加了以下代碼：
<div class="q-field__bottom row items-start q-field__bottom--animated">...</div>
這是在Google Chrome上呈現的q-input的完整代碼（上面的代碼以粉紅色顯示）：
實際上，代碼"<div 有時會困擾我的UI（用戶界面），所以我真的很想洗掉代碼。如何洗掉它？
uj5u.com熱心網友回復：
是的，有一個屬性可以洗掉底部空間hide-bottom-space。
<q-input
hide-bottom-space // Here
filled
outlined
square
dense
clearable
v-model="vModel"
:rules="[(val) => (val && val.length > 0)]"
/>
hide-bottom-space - 當不使用這些提示/錯誤/計數器時，不再為這些提示/錯誤/計數器保留空間；結果，它也禁用了那些影片；它還允許提示/錯誤區域根據其內容垂直拉伸
uj5u.com熱心網友回復：
在下面添加此CSS代碼，它洗掉了代碼“<div 并且根本不會打擾您的UI（用戶界面）：
.q-field__bottom {
display: none;
}
實際上，下面的代碼部分添加或制作了代碼"<div ：
:rules="[(val) => (val && val.length > 0)]"
另外，hide-bottom-space還可以去掉代碼"<div 。
<q-input
hide-bottom-space // Here
filled
outlined
square
dense
clearable
v-model="vModel"
:rules="[(val) => (val && val.length > 0)]"
/>
但是，在hide-bottom-space 的這種情況下，如果出現輸入錯誤，則添加與“<div 幾乎相同的代碼，與沒有的CSS代碼不同根本麻煩UI（用戶界面）。
<div class="q-field__bottom row items-start q-field__bottom--state">...</div>
所以如果你不想為你的UI 帶來任何麻煩，你最好使用帖子頂部的CSS代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/312915.html
下一篇：如何在顫動中在螢屏上顯示小部件？