Question

我想更改字体大小。但是，如果我这样做，则行高不会改变。我尝试使用row-height =“ 40”来做到这一点。不幸的是，这不起作用。我已经测试了支持v-textarea的vue开发扩展。在那里，我看到了rowHeight。但这也没有效果。

    <v-textarea
        value="The Woodman set to work at once,and so sharp was his axe that the tree was soon chopped nearly through."
        row-height="40"
        class="headline"
     ></v-textarea>

Vuetify Guide -> Textarea

属性名称= 行高（每行的高度值）

默认值= 24

类型=数字|字符串

非常感谢克里斯

Answer 1

您可以添加rows="4"属性来更改text-area的高度。要更改row-height，您可以添加一个CSS类

.v-textarea textarea {
      line-height: 40px;
 }

See my example

Answer 2

我偶然发现您遇到了同样的问题，并且css解决方案不够用，因为line-height值不会产生反应。

非常感谢，在最新的组件文档（https://vuetifyjs.com/en/components/textarea）中，很明显需要 auto-grow 道具才能获得 row-height 适用的道具：

行高：   型号字符串，默认为24

说明：   每行的高度值。 需要使用自动增长道具。

Answer 3

如果您设置了 [样式范围]，有时它不起作用。那是什么对我有用。我在这里使用了一个 attribues + important 运算符，它甚至可以与样式范围选项一起使用。

    <v-textarea text-narrow>
    ...
    </v-textarea>

    <style scope>
    [text-narrow] {
        line-height: 1.1 !important;
    }
    </style>

Vuetify-如何更改v-textarea行高？

3 个答案: