如何设置 b'el-input textarea' 的高度?
时间: 2024-05-10 19:16:46 浏览: 57
可以通过 CSS 来设置 `b'el-input textarea'` 的高度。例如:
```css
.b-el-input textarea {
height: 100px; /* 设置高度为 100 像素 */
}
```
你可以根据自己的需求调整高度的值。另外,如果你想让 `textarea` 的高度根据内容自适应,可以使用 `auto` 值:
```css
.b-el-input textarea {
height: auto; /* 高度根据内容自适应 */
}
```
相关问题
el-input textarea 高度自适应
el-input textarea 高度自适应可以通过添加一个监听文本框内容变化的方法,并在该方法中手动计算文本框的高度来实现。具体步骤如下:
1. 在 el-input 组件中添加一个监听方法 oninput,该方法用于监听文本框内容的变化。
2. 在该方法中获取 el-input 组件中的 textarea 节点。
3. 如果获取到了 textarea 节点,先将其高度设置为自适应,然后根据内容计算高度并设置为新的高度。
以下是一个示例代码:
```html
<template>
<el-input
autocomplete="off"
type="textarea"
:autosize="{ minRows: 3, maxRows: 10 }"
class="no-scroll"
ref="reviewInput"
@input="autoAdjustReviewInput"
></el-input>
</template>
<script>
export default {
methods: {
autoAdjustReviewInput() {
const textArea = this.$refs.reviewInput.$refs.textarea;
if (textArea) {
textArea.style.height = 'auto';
textArea.style.height = `${textArea.scrollHeight}px`;
}
}
}
};
</script>
```
在上述代码中,我们通过 `@input="autoAdjustReviewInput"` 将 `autoAdjustReviewInput` 方法绑定到 el-input 组件的输入事件上,当文本框内容发生变化时,会触发该方法,从而实现了 el-input textarea 的高度自适应。
el-input textarea的高度
el-input textarea的高度可以通过使用autosize属性来实现文本域的自适应高度。你可以在el-input标签中添加autosize属性来自适应文本域的高度,如下所示:
<el-input type="textarea" v-model="createForm.desc" autosize></el-input>
这样,文本域的高度将根据输入的内容进行自动调整。同时,你也可以使用其他方式来控制文本域的高度,比如通过设置固定行数或者指定高度范围来限制文本域的高度。具体的方法可以参考上面提到的引用中的说明。
阅读全文