el-input textarea禁止左右拉伸
时间: 2024-09-09 12:10:34 浏览: 159
vue + el-input 中 textarea 实现 placeholder 换行
在使用`el-input`组件的`textarea`模式时,如果你希望禁止用户通过拖动改变其大小,即禁止左右拉伸,你可以通过设置CSS样式来实现。具体方法是在`el-input`组件的外部包裹一个`div`元素,并对该`div`元素应用`resize: none;`样式属性。这样做可以阻止任何包含在其中的元素(在这个场景下是`el-input`)的调整大小行为。
下面是一个简单的示例:
```html
<div class="no-resize">
<el-input type="textarea" v-model="textarea" placeholder="请输入内容"></el-input>
</div>
```
对应的CSS样式可以是:
```css
.no-resize {
resize: none;
overflow: auto;
}
```
这里`.no-resize`类应用了`resize: none;`属性,它禁止了元素的大小调整。`overflow: auto;`确保了当文本内容超过`el-input`的初始大小时,可以出现滚动条以查看隐藏的内容。
阅读全文