如何在 Vuetify 中更改文本字段的宽度和高度？

Posted 2023-02-23

【中文标题】如何在 Vuetify 中更改文本字段的宽度和高度？

【英文标题】：How can I change the width and height of a textfield in Vuetify?

【发布时间】：2020-01-13 09:55:03

【问题描述】：

我想更改<v-text-field>tag 的宽度和高度。

我已经尝试过使用 .css 但它不会更改实际文本字段的参数，而只会更改一些不可见的参数，这会导致我的页面。

这是我已经尝试过的。

<template>
  <v-text-field class="first"></v-text-field>
</template>

<style>
  .first 
    width: 150px !important;
    height: 350px !important
  
</style>

【参考方案1】：

您不需要添加 CSS 规则来更改 v-text-field 高度，您可以简单地使用 height 属性，例如：

  <v-text-field ></v-text-field>

但你的组件应该放在template 内而不是script 标签内：

 <template>
  <v-text-field ></v-text-field>
 </template>

【讨论】：

好吧，为什么我没想到，我不知道...我觉得自己很笨。

【参考方案2】：

尝试在 v-text-field 上方使用包装器并应用所需的样式。

   <div class="first">
    <v-text-field></v-text-field>
    </div>