如何改变v-文本区域的行高？

Question

我想改变字体的大小。但是如果我这样做的话，行高就不会改变。我试着用行高= "40“来做这件事。不幸的是，这是行不通的。我已经用vue开发扩展进行了测试，该扩展支持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

支柱名称=行高(每一行的高度值)

Default= 24

Type = number = string

非常感谢，克里斯

Answer 1

可以添加rows="4"属性以更改text-area的高度。若要更改row-height，可以添加css类。

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

见我的例子

Answer 2

我无意中遇到了同样的问题，css解决方案也不够，因为行高值不会是反应性的。

值得庆幸的是，在最新的组件文档(https://vuetifyjs.com/en/components/textarea)中，its现在清楚地表明，要应用行高支柱，就需要自动增长的支柱：

行-高度：输入数字\字符串，默认值为24 描述:每一行的高度值。需要使用自动增长工具.。

Answer 3

有时，如果设置了样式范围，它就不起作用了。这才是对我有用的。我在这里使用了一个属性+重要操作符，它甚至可以使用样式范围选项。

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

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