el-input textarea怎么跟input文字高度一致
时间: 2023-11-07 13:51:11 浏览: 256
对于el-input textarea,你可以通过设置行数来实现和input文字高度一致的效果。你可以使用rows属性来指定textarea的行数,例如:rows="1"表示只有一行。另外,你可以通过设置textarea的样式来使其和input的文字高度一致。例如,设置textarea的高度和line-height属性与input保持一致。具体的做法可以参考以下代码示例:
```html
<template>
<el-form-item label="输入码">
<div class="form-content">
<el-input type="textarea" :rows="1" v-model="list" placeholder="请输入" @input="handleInput" />
</div>
</el-form-item>
</template>
<style>
.form-content {
position: relative;
}
.el-input__inner {
height: 34px; // 调整高度与input保持一致
line-height: 34px; // 调整行高与input保持一致
}
</style>
```
以上代码将el-input textarea的行数设置为1,并通过样式设置高度和行高与input保持一致。这样就能够实现el-input textarea和input文字高度一致的效果了。
相关问题
el-input textarea怎么跟input标题文字高度一致
要使 `<el-input type="textarea">` 的高度与输入标题文字一致,可以使用以下方法:
使用 CSS 来控制 `<el-input type="textarea">` 的高度,使其与输入标题文字的高度一致。你可以将 `<el-input type="textarea">` 的高度设为与输入标题文字的高度相同。
在 CSS 样式中,找到 `.label` 类的 `<label>` 元素,将它的 `transform: translateY(10px)` 修改为 `transform: translateY(0)`,以使输入标题文字回到原来的位置。
示例代码如下:
```css
.el-form-item .el-input__inner {
height: 24px; /* 根据实际情况调整高度 */
}
.label label {
transform: translateY(0);
}
```
请注意,你可能需要根据实际情况调整高度值。在这个示例中,我将 `<el-input type="textarea">` 的高度设为 24px,你可以根据你的需求进行调整。
el-input textarea 固定高度
el-input textarea的高度可以通过CSS样式来进行设置。以下是两种设置el-input textarea固定高度的方法:
1. 使用CSS样式设置el-input textarea的高度:
```css
.el-textarea {
height: 88px;
}
.el-textarea__inner {
height: 88px;
}
```
2. 使用Vue.js的语法设置el-input textarea的高度:
```html
<el-input type="textarea" :rows="2" autosize></el-input>
```
在上述代码中,我们将el-input的类型设置为textarea,并使用autosize属性启用自适应高度。通过设置rows属性,我们可以指定el-input的初始行数。在这个例子中,我们将最小行数设置为1,最大行数设置为2,样el-input的高度就会根据输入内容的多少自适应。
阅读全文