Vuetify3如何停止移动按钮答案

【问题标题】：Vuetify3 how to stop moving buttonVuetify3如何停止移动按钮
【发布时间】：2022-11-14 00:09:12
【问题描述】：

我是 vuetify 的新手，我正在努力解决一个问题，但我不知道如何用谷歌搜索它。

这是一个问题； v-textarea与:hint一起使用，如果没有输入，提示信息显示在textarea下方。当用户尝试单击按钮时，按钮会移动一点，因为此提示消息会消失。我想知道如何使 v-textarea 和提示消息一起不影响其他组件的放置。

  <div>
    <v-container fluid="false">
      <v-row>
        <v-textarea
          v-model="searchesText"
          :label="label"
          :hint="hint"
          :rows="5"
          hide-details="auto"
        />
      </v-row>
    </v-container>
  </div>

  <v-container>
    <div>
      <v-row>
        <v-spacer />
        <v-btn fab color="green" :disabled="!searchable" @click="onClickSearch">
          Click
          <!-- <v-icon :icon="mdiMagnify"></v-icon> -->
        </v-btn>
      </v-row>
    </div>
  </v-container>

谢谢你。

【问题讨论】：

标签： vuetify.js

【解决方案1】：

将 hide-details="auto" 更改为 :hide-details="false" 或完全删除该属性。那应该对你有用。

working example on codepen

Vuetify 使用该空间来呈现验证错误或提示。在您的情况下，由于它设置为自动，Vuetify 在没有提示适用时（即直到用户没有关注文本区域）删除空间，然后在文本区域集中时添加空间。这导致了轻微的布局变化。

由于您刚刚开始使用 Vuetify，因此最好了解有关容器、行和列的更多信息，以更好地构建您的代码。

理想情况下，一个容器可以包含多行。一个行后应始终跟一列标签，您可以在列内添加元素（例如文本区域、按钮、卡片、div 等）。这也将确保元素之间的间距均匀。

对于这两个问题，您可以参考上面的 Codepen 链接。

干杯!

【讨论】：