vue3 el-input type=“textarea“ 字体样式 及高度设置

在Vue 3中，如果你使用的是Element Plus库中的<el-input>组件作为文本域（type="textarea"），你可以通过几种方式来设置字体样式和高度。

1. 直接在<el-input>组件上使用style属性

你可以直接在<el-input>标签上使用style属性来设置字体样式和高度。例如：

<template>
  <el-input
    type="textarea"
    :rows="4" <!-- 控制高度，也可以通过style设置 -->
    style="font-size: 16px; height: 100px;"
  ></el-input>
</template>

2. 使用CSS类

更推荐的做法是使用CSS类来设置样式，这样可以使你的代码更加清晰和可维护。首先，你可以在组件的<style>部分定义一个类：

<style scoped>
.custom-textarea {
  font-size: 16px;
  height: 100px; /* 或者使用line-height来控制行高 */
}
</style>

然后在<el-input>上应用这个类：

<template>
  <el-input
    type="textarea"
    :rows="4" <!-- 控制高度，也可以通过class设置 -->
    class="custom-textarea"
  ></el-input>
</template>

3. 使用:rows属性控制高度（推荐）

对于高度，Element Plus的<el-input>组件提供了一个:rows属性，该属性可以帮助你控制文本域的行数，从而间接影响其高度。例如，如果你想要一个高度为100px的文本域，你可以通过调整:rows属性与font-size来近似达到这个效果：

<template>
  <el-input
    type="textarea"
    :rows="4" <!-- 大约100px的高度，取决于font-size -->
    style="font-size: 20px;" <!-- 根据需要调整字体大小 -->
  ></el-input>
</template>

注意，:rows属性是基于字体大小来计算高度的，所以你可能需要调整:rows和font-size的组合以达到精确的高度。例如，如果你设置了font-size: 16px，那么大约需要设置:rows="6"来达到大约100px的高度。具体行数到像素高度的转换依赖于字体大小和其他CSS样式（如行间距等）。

4. 使用CSS的min-height或max-height属性

如果你想要文本域有最小或最大高度限制，可以使用CSS的min-height或max-height属性：

<style scoped>
.custom-textarea {
  min-height: 100px; /* 最小高度 */
  max-height: 200px; /* 最大高度 */
}
</style>

然后在<el-input>上应用这个类：

<template>
  <el-input
    type="textarea"
    class="custom-textarea"
  ></el-input>
</template>

这样，你就可以灵活地控制Element Plus <el-input type="textarea">组件的字体样式和高度了。