el-input 如何设置高度铺满屏幕
时间: 2023-10-27 18:55:54 浏览: 153
对于 `el-input` 组件,要使其高度铺满屏幕,你可以使用 CSS 来设置其高度为 100%。以下是示例代码:
```html
<template>
<div class="container">
<el-input class="full-height" placeholder="请输入内容"></el-input>
</div>
</template>
<style>
.container {
height: 100vh; /* 设置容器高度为视口高度 */
}
.full-height {
height: 100%; /* 设置 el-input 的高度为容器的百分百 */
}
</style>
```
在上述代码中,我们使用了一个容器 `div` 来包裹 `el-input` 组件,并通过设置容器的高度为视口高度(`100vh`),以铺满整个屏幕。然后,通过给 `el-input` 添加一个自定义的类名 `.full-height`,并设置其高度为 `100%`,使其撑满容器的高度。
通过以上设置,`el-input` 组件的高度将会铺满整个屏幕。
相关问题
el-input设置高度
你可以通过设置 `height` 属性来控制 `el-input` 的高度,例如:
```html
<el-input height="50px"></el-input>
```
你也可以在 CSS 中为 `el-input` 设置高度,例如:
```css
.el-input {
height: 50px;
}
```
el-input 设置高度随内容自动撑开
可以使用 `autosize` 属性来实现 el-input 高度随内容自动撑开的效果。
示例代码:
```html
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容"></el-input>
```
其中,`autosize` 属性接受一个对象,对象中包含 `minRows` 和 `maxRows` 两个属性,用于控制最小行数和最大行数。设置 `minRows` 为 2,`maxRows` 为 6 可以保证输入框在不同内容长度下始终保持高度自适应。
注意:使用 `autosize` 属性时,`type` 属性需要设置为 `textarea`。