vue中textarea高度的设置_vue-textarea 自适应高度

需求简介

一个搜索页面，上面输入框，下面列表展示搜索到的结果。

重点是：产品要求搜索框默认显示一行，当输入的文字超过一行时，输入框的高度会随着改变，直到输入完毕。

解决思路设想

本想利用textarea实现，但textarea不支持自适应高度，而是定好高度或者是行数之后，超出部分就会显示滚动条。只能另想。

根据需求，首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号自动变小的技巧，但仔细一琢磨，不行。这个是根据内容元素的个数，进行处理，而这儿是输入框，没有内容元素。

后面想到可以利用html属性contenteditable="true"，加在div上让其可编辑来模拟自适应高度。可是需要在vue中双向绑定实现，这个不是很好处理。

后面想到利用textarea的row属性，根据输入内容的长度控制row的值，为1-n行，但这个似乎不是很智能，因为多少个字体一行不一定，英文、中文、数字的宽度不一致，而且row属性在每个浏览器中的表现不一致。

最后利用textarea，监听change事件，让其高度=其滚动条高度，来达到高度自适应。

没想到最后还是利用了textarea。

实现

util.js

/**

* 文本框根据输入内容自适应高度

* @param {HTMLElement} 输入框元素

* @param {Number} 设置光标与输入框保持的距离(默认0)

* @param {Number} 设置最大高度(可选)

* @callback {Function} 设置回调函数(可选)

*/

export const autoTextarea = function (elem, extra, maxHeight, callback) {

extra = extra || 0;

var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,

isOpera = !!window.opera && !!window.opera.toString()