时间戳

首页 > 解决方案 > Vuetify：根据（错误）消息的可见性调整输入字段的底部边距

html - Vuetify：根据（错误）消息的可见性调整输入字段的底部边距

问题描述

v-input__control在 Vuetify 2.0 中，如果输入字段 ( )v-messages__wrapper为空，是否可以减少底部边距？

所以当它像这样时，我需要更少的底部边距：

<div class="v-input__control">
    <div class="v-input__slot">...</div>
    <div class="v-text-field__details">
        <div class="v-messages theme--light">
            <div class="v-messages__wrapper"></div>
        </div>
    </div>
</div>

更多的时候是这样的：

<div class="v-input__control">
    <div class="v-input__slot">...</div>
    <div class="v-text-field__details">
        <div class="v-messages theme--light">
            <div class="v-messages__wrapper"><div class="v-messages__message">Mandatory field</div></div>
        </div>
    </div>
</div>

我一直在尝试，div.v-messages__wrapper:empty但我无法对这个 div 做很多事情来减少底部边距。据我所知，减少边距的唯一方法是设置display: none或设置负边距，div.v-text-field__details但此类不知道没有内部内容。

是否有任何选项可以完成此操作（最好使用 css）？

标签： htmlcssvuetify.js

解决方案

我也遇到过类似的情况。

我注意到当出现错误消息时，error--text类被添加到输入 div 中。所以，我添加了一种风格：-

<style>

.error--text {
  margin-bottom: 10px !important;
}

</style>

现在，每当出现错误时，都会应用 a margin-bottomof10 px并解决我的问题。

推荐阅读