如何实现Vue中textarea自适应高度的方案？

本文共计959个文字，预计阅读时间需要4分钟。

目录- 隐藏的问题- 解决自适应高度的方案- 先给方案- Vue栈有需求的同学可以直接下载vue-awesome-textarea- 隐藏的问题- 招开原生JS，框架的大部分部分UI库都支持自适应textarea高度功能，但普遍都忽略了

目录

• 隐藏的问题
• 解决自适应高度的方案

先给方案，Vue栈有需求的同学可以直接下载vue-awesome-textarea

隐藏的问题

抛开原生JS，框架的大部分UI库都支持自适应textarea高度功能，但普遍都忽略了一个功能，就是自适应高度的回显。

使用这些库的时候，我们很容易的在textarea中键入内容，超出范围时会自动延展一行，保证内容高度的自适应。当我们提交内容，在其它页面使用同样的UI来渲染时，麻烦的就来了，有些UI库是不支持自适应回显的，这就需要我们通过行高、行数甚至高度之间的计算得出一个基值，从而实现回显。

解决自适应高度的方案

常见得方案有两种，一种是在页面地“边远地区”添加一个ghost dom来模拟输入换行，这个dom的可能是editable属性为true的div或者是一个一摸一样得textarea。