如何在 Vuetify 中更改文本字段的宽度和高度? [英] How can I change the width and height of a textfield in Vuetify?

问题描述

我想更改标签的宽度和高度.

I would like to change the width as well as the height of the <v-text-field>tag.

我已经尝试过使用 .css 但它不会更改实际文本字段的参数，而是只会更改某些类型的不可见参数，这些参数会导致我的屏幕上出现大的空白页面.

I've already tried doing it with .css but it doesn't change the parameters of the actual textfield, instead it only changes some kinds of invisible parameters which result in big white spaces on my page.

这是我已经尝试过的.

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

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

推荐答案

你不需要添加 CSS 规则来改变 v-text-field 的高度，你可以简单地使用 height 道具如:

You don't need to add CSS rules to change the v-text-field height, you could simply use the height prop like :

  <v-text-field height="350"></v-text-field>

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

but your component should be placed inside the template not in script tag :

 <template>
  <v-text-field height="350"></v-text-field>
 </template>

这篇关于如何在 Vuetify 中更改文本字段的宽度和高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！