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

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

隐藏的问题

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

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

解决自适应高度的方案

常见得四级英语作文模板万能句型方案有两种，一种是在页面地“边远地区”添加一个ghost dom来模拟输入换行，这个dom的可能是editable属性为true的div或者是一个一摸一样得textarea。
以element-ui的input组件举例，当我们在组件内输入值时，会调用resizetextarea方法

resizetextarea() { if (this.$isrver) return; const { autosize, type } = this; if (type !== 'textarea') return; if (!autosize) {  this.textareacalcstyle = {   minheight: calctextareaheight(this.$refs.textarea).minheight  };  return; } const minrows = autosize.minrows; const maxrows = autosize.maxrows; this.textareacalcs湖南工学院是几本tyle = calctextareaheight(this.$refs.textarea, minrows, maxrows);}

当设置了autosize为true则textarea设为自适应高度。此时textarea的高度会通过calctextareaheight方法实时计算。

export default function calctextareaheight( targetelement, minrows = 1, maxrows = null) { if (!hiddentextarea) {  hiddentextarea = document.createelement('textarea');  document.body.appendchild(hiddentextarea); } let {  paddingsize,  bordersize,  boxsizing,  contextstyle } = calculatenodestyling(targetelement); hiddentextarea.tattribute('style', `${contextstyle};${hidden_style}`); hiddentextarea.value = targetelement.value || targetelement.placeholder || ''; let height = hiddentextarea.scrollheight; const result = {}; if (boxsizing === 'border-box') {  height = height + bordersize; } el if (boxsizing === 'content-box') {  height = height - paddingsize; } hiddentextarea.value = ''; let singlerowheight = hiddentextarea.scrollheight - paddingsize; if (minrows !== null) {  let minheight = singlerowheight * minrows;  if (boxsizing === 'border-box') {   minheight = minheight + paddingsize + bordersize;  }  height = math.max(minheight, height);  result.minheight = `${ minheight }px`; } if (maxrows !==教师节红包发什么数字 null) {  let maxheight = singlerowheight * max青海专升本rows;  if (boxsizing === 'border-box') {   maxheight = maxheight + paddingsize + bordersize;  }  height = math.min(maxheight, height); } result.height = `${ height }px`; hiddentextarea.parentnode && hiddentextarea.parentnode.removechild(hiddentextarea); hiddentextarea = null; return result;};

我们可以看到

if (!hiddentextarea) {  hiddentextarea = document.createelement('textarea');  document.body.appendchild(hiddentextarea);}

element-ui创建了一个textarea的dom，通过calculatenodestyling方法将真正的textarea的样式复制给hiddentextarea（overflow不同步，真正的textarea是为hidden）。接着监听textarea的输入值，同步给hiddentextarea。同时将hiddentextarea的scrollheight同步给textarea的高度，最后再将dom销毁掉。

关于样式的同步，element这里用了getcomputedstyle和getpropertyvalue这两个api。当然，如果你自己封装的话，也可以使用css预处理器的mixin。

第二种方案与第一种方案类似，不过不会创建额外的dom。以开头的vue-awesome-textarea举例：

init() {  this.initautoresize()},initautoresize () {  this.autoresize && this.$nexttick(this.calcresize)}

在页面mounted或者内容变动且开启自适应高度autoresize的时候，执行this.calcresize方法。

calcresize() { this.retheight() this.calctextareah()},retheight() { this.height = 'auto'},calctextareah() { let contentheight = this.calccontentheight() this.height = this.calcheightchange(contentheight) + 'px' if (this.needupdaterows(contentheight)) {  this.updaterows(contentheight) } this.oldcontentheight = content传统节日作文三年级下册height},calccontentheight () { const { paddingsize } = this.calcnodestyle(this.$el) return this.$el.scrollheight - paddingsize},

retheight()是来初始化textarea的高度，默认为auto。calctextareah()方法是用来计算内容区域的高度（textarea的scrollheight减去padding的高度），同时将计算好的高度实时同步给textarea的高：
this.height = this.calcheightchange(contentheight) + ‘px’

相比方案一，这个方案采用的思路相同（动态修改高度），但是减少了额外的dom创建和销毁的过程。
此外，vue-awesome-textarea还支持在自适应的过程中回调行数，可以更好的支持数据回显。实现的方法也很简单：

computed: { ... onerowsheight() {  return this.calccontentheight() / number(this.rows) || 0 } ...}

在computed中我们计算出单行的高度，同时在执行this.calctextareah()方法时我们记录下内容高度：

this.oldcontentheight = contentheight

接着我们会比对是否存在添加行操作，一旦添加则新的内容高度和老的内容高度会不同：

needupdaterows(newcontentheight) {  return this.oldcontentheight !== newcontentheight},

此时我们会把最新的行高emit到组件外部：

updaterows(contentheight) {  this.$emit('getrows', math.round(contentheight / this.onerowsheight))}

到此这篇关于vue中textarea自适应高度方案的实现的文章就介绍到这了,更多相关vue textarea自适应内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！