### Element-UI 中 `el-
input` 类型为 `textarea` 的自适应
宽度实现
在 Element-UI 中，`el-
input` 组件支持通过设置属性来控制其行为和外观。然而，默认情况下，`el-
input` 的 `textarea` 类型仅提供高度自适应的功能[^3]，并未直接内置
宽度自适应的支持。
要实现 `el-
input` 类型为 `textarea` 的
自动调整
宽度功能，可以通过以下几种方法：
#### 方法一：动态监听内容变化并修改样式
可以利用 JavaScript 动态计算文本内容的长度，并根据内容长度实时更新容器的
宽度。以下是具体实现方式：
```javascript
watchTextAreaWidth() {
const textarea = document.querySelector('.custom-textarea');
if (!textarea) return;
// 创建一个隐藏的 span 元素用于测量文字
宽度
const measureSpan = document.createElement('span');
measureSpan.style.visibility = 'hidden';
measureSpan.style.whiteSpace = 'pre-wrap';
measureSpan.style.position = 'absolute';
document.body.appendChild(measureSpan);
function updateWidth(value) {
measureSpan.textContent = value;
const width = Math.min(500, measureSpan.offsetWidth + 20); // 设置最大
宽度限制
textarea.style.width = `${width}px`;
}
new MutationObserver((mutationsList) => {
mutationsList.forEach(mutation => {
if (mutation.type === 'childList') {
updateWidth(textarea.value);
}
});
}).observe(textarea, { childList: true });
// 初始化
宽度
updateWidth(textarea.value);
}
```
上述代码中，创建了一个不可见的 `<span>` 元素作为辅助工具，用来模拟 `textarea` 的内容布局，并据此调整实际显示区域的
宽度[^1]。
---
#### 方法二：CSS Flexbox 布局结合弹性盒子
如果希望更简单地实现
宽度自适应效果，也可以尝试使用 CSS 的 Flexbox 技术。将父级容器设为 flex 容器，并允许子元素
扩展到合适大小即可。
```
html
<div class="flex-container">
<el-
input type="textarea" v-model="textValue"></el-
input>
</div>
<style scoped>
.flex-container {
display: flex;
}
.el-textarea .el-textarea__inner {
resize: none; /* 禁用手动调整 */
min-width: 100px; /* 初始最小
宽度 */
max-width: 500px; /* 最大
宽度限制 */
transition: width 0.3s ease-in-out; /* 平滑过渡动画 */
}
/* 当内容超出时触发
宽度增长 */
[data-vue-el-textarea]:not(:empty):focus,
[data-vue-el-textarea]:not(:empty):hover {
width: auto !important;
}
</style>
```
此方案依赖于浏览器默认的行为以及 Vue.js 数据绑定机制，在用户输入过程中会自然触发动态宽高调整逻辑。
---
#### 方法三：插件化解决方案
对于复杂场景下的需求（比如频繁交互或者性能敏感），推荐引入第三方库如 **autosize** 来简化开发流程。该库能够高效处理各种类型的文本框尺寸适配问题。
安装命令如下所示：
```bash
npm install autosize --save
```
随后初始化配置如下：
```javascript
import autosize from 'autosize';
export default {
mounted() {
this.$nextTick(() => {
const textareas = Array.from(document.querySelectorAll('.auto-resize'));
textareas.forEach(ta => autosize(ta));
});
},
};
```
模板部分则需指定对应类名以便被正确识别：
```
html
<el-
input
type="textarea"
class="auto-resize"
:rows="2"
v-model="contentModel">
</el-
input>
```
这种方法不仅适用于水平方向上的伸缩管理，还能兼容垂直滚动条等功能特性。
---
### 总结
以上三种途径各有优劣，开发者应依据项目实际情况灵活选用最合适的策略完成目标设定。无论是借助原生 DOM 操作还是采用成熟的开源框架，都能有效达成期望中的用户体验优化目的。
由于未提供博客具体内容，无法给出包含关键信息的摘要。
扫一扫
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
