最稳方案是用 textarea + autosize，禁用 contenteditable；autosize 需设 minrows=1、maxrows 为硬上限，并确保父容器无 overflow:hidden 或固定高度，同时清除 .el-textarea__inner 的边框、阴影及内边距，scoped 下须用 ::v-deep 穿透样式。

用 textarea + autosize 最稳，别碰 contenteditable

直接结论：在 Vue/Element UI 项目里，contenteditable 配合 v-model 就是输入法灾难现场——中文拼音重复、光标乱跳、回车失灵。这不是兼容性问题，是 Vue 响应式更新强制重写 DOM 与浏览器原生编辑状态的底层冲突。唯一靠谱路径是回归表单语义，用 textarea，靠 autosize 控制高度逻辑。

autosize 参数怎么设才不翻车

autosize 不是开个开关就完事，它有三个关键行为必须提前对齐预期：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• minRows 是初始行数（不是最小像素高度），设为 1 才能真正“默认只占一行”
• maxRows 是硬上限，超过后内部出现滚动条，但整个组件容器高度不再增长
• 实际撑高依赖 scrollHeight 计算，所以必须确保父容器没设 overflow: hidden 或 height 固定值，否则滚动条被截断或高度卡死

CSS “扒皮”时最容易漏掉的三处样式

Element UI 的 el-input 默认带边框、阴影、内边距和聚焦蓝框，想伪装成无感 div，这三处不处理就会露馅：

• .el-textarea__inner 的 border 和 box-shadow 必须用 !important 覆盖，否则某些浏览器仍会渲染灰色描边
• padding 要重置为 0 或按需微调，否则文字离边缘太远，不像自然段落
• 如果用了 scoped，必须加 ::v-deep 或 /deep/ 穿透，否则样式压根不生效——这是 Vue 单文件组件里最常卡住的点

原生 textarea 手动撑高要防什么坑

不用框架时，纯 JS 监听 input 事件手动设置高度，有三个隐形雷区：

• 每次设 height = 'auto' 再读 scrollHeight 是必须步骤，跳过会导致高度越撑越大
• 移动端 Safari 对 scrollHeight 计算不准，尤其含 emoji 或换行符时，建议加 setTimeout 延迟一帧再读
• 用户粘贴大段文本时，input 事件可能触发多次，需节流或用 requestAnimationFrame 防抖，否则界面卡顿

真实场景里，高度自适应从来不是单纯“让框变高”，而是要平衡光标定位、输入法状态、滚动锚点、移动端适配这四件事。哪个环节松动，用户就会在打字中途突然失去焦点或内容错位——这些细节不会报错，但会让产品体验掉一个量级。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！