element UI 设置type=“textarea“ 禁止输入框缩放

admin管理员组

文章数量:1516870

element UI 设置type=“textarea“ 禁止输入框缩放

背景

在 Element UI 中，当您使用 el-input 组件并设置 type="textarea" 时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，需要使用 CSS 来覆盖默认的浏览器行为。

注意上图，第一张是可以缩放的，第二章不能缩放的。区别就在于右下角的展示；

实现 

1、在 Element UI 中，当您使用 el-input 组件并设置 type="textarea" 时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，您需要使用 CSS 来覆盖默认的浏览器行为。

<el-input  type="textarea"  :rows="2"  :cols="30"  placeholder="请输入内容"  style="resize: none;"  
></el-input>

2、全局样式：在您的 CSS 文件中添加样式规则

.el-textarea__inner {  resize: none;  
}

确保这个 CSS 规则在 Element UI 的样式之后加载，以确保它可以正确地覆盖默认样式。

3、Scoped CSS：如果您在单文件组件中使用 Vue，并希望仅在该组件中应用此样式，可以使用 scoped CSS。

<style scoped>  
.el-textarea__inner {  resize: none;  
}  
</style>

同样，确保这个样式规则在 Element UI 的样式之后加载。

本文标签： element UI 设置type“textarea“ 禁止输入框缩放