文章目录

前言一、通过隐藏div的方式来设置文本域自适应高度1. 新增一个文本域样式一个的dom，但是里面的textarea改为div2. 隐藏div的class3.设置文本域高度的方法 二、仿element-ui组件设置textarea自适应高度1.element-ui中自适应效果2. 看源码，盘逻辑，找思路（1）找到element-ui的input（2）在input.vue中查看autosize 方法（element-ui就是由这个方法控制文本域高度的）（3）resizeTextarea方法（3）resizeTextarea触发时机（文件中搜索只有四次） 3. 项目中实际使用及其代码（1) calcTextareaHeight.js（2) 文本域组件 new-textarea.vue (名字任意,别取textarea)（3) 要使用文本域高度自适应的页面(例如index.vue)（4)效果 总结

前言

css、js（vue）进行textarea自适应高度（超详细说明） 一文中我有使用弹性布局来设置样式，通过监听文本域的input 事件修改当前文本域的高度来达到文本域自适应高度的问题。

关键代码如下：

其实上面的已经可以解决大部分关于文本域自适应高度的问题了，但当我需求是默认显示一行，最高显示4行的时候，出现了一个新问题。在字体大小为16px，行高为30px的情况下，当你设置this.style.height = 'inherit'的时候，行高默认展示的 scrollHeight 会加上padding的值，这时候我的 padding 为上下16px，这就间接导致初始化文本域高度的时候，所展示的默认高为 32 (行高) + 32 (上下的padding) = 64， 当我不改变设置this.style.height = 'inherit'的时候，而文本域由于有placeholder导致无法最小显示两行，这属于一个无法修改的bug。

关于w3c上scrollHeight 的定义：

scrollHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。

一、通过隐藏div的方式来设置文本域自适应高度

原理：复制一份展示文本域的内容，然后将这个div设置z-index为100（数值任意，但是不能在页面上看到这个div，直接设置display: none会导致获取不到隐藏div的高度）。将这个隐藏div的scrollHeight赋值给文本域即可。

1. 新增一个文本域样式一个的dom，但是里面的textarea改为div

<div class="textarea_box"><textarea v-model="text" key="teatareaId" id="teatareaId" class="textarea" placeholder="请输入内容"></textarea><div class="btn"></div></div><div class="textarea_box"><div key="teatareaDivId" id="teatareaDivId" class="textarea_div">{{text}}</div><div class="btn"></div></div>

2. 隐藏div的class

直接设置display: none会导致获取不到隐藏div的高度，所以这里使用了z-index: 100,用层级将其遮挡。

.side {display: flex;flex-direction: column;height: 100%;.textarea_box {display: flex;width: 100%;border-radius: 4px;border: 1px solid #e5e9eb;background: #fff;box-sizing: border-box;.textarea{flex: 1;height: 32px;line-height: 30px;font-size: 16px;margin: 16px;max-height: 122px;overflow-x: hidden;overflow-y: auto;box-sizing: border-box;}.textarea_div{position: absolute;z-index: -100;width: calc(100% - 128px);min-height: 32px;line-height: 30px;font-size: 16px;margin: 16px;box-sizing: border-box;white-space: pre-wrap;}.btn{position: relative;width: 48px;height: 100%;border-radius: 0 3px 3px 0;background: #1879fe;&_disabled{opacity: 0.3;}}}}

3.设置文本域高度的方法

// 设置文本域高度的方法setTextareaHeight() {this.$nextTick(function () {let teatareaDom = document.getElementById('teatareaId'); // 文本域的domlet teatareaDivDom = document.getElementById('teatareaDivId'); // 隐藏input的domfunction setHiehgt(){chapDom.style.height = "auto"; // 初始化高度chapDom.style.height = `${teatareaDivDom.scrollHeight}px`; // 文本域的高度等于隐藏input的高度}setHiehgt(); // 进入页面默认调用一次获取对应的高度// 监听修改了文本域的值修改高度document.getElementById('chapTextareaId').addEventListener("input", function() {setHiehgt();});});},

执行以上步骤后，你可以根据max-height来设置最多展示几行。但是这样依旧会有一个问题， 当前按回车的时候，div里面的数据是不会换行的，在我思考N久后，找到了element-ui的input组件可以设置自适应高度

二、仿element-ui组件设置textarea自适应高度

1.element-ui中自适应效果

效果图地址： /#/zh-CN/component/input

效果图前：

效果图后（按回车）：

2. 看源码，盘逻辑，找思路

（1）找到element-ui的input

element-ui的input地址为：/ElemeFE/element/blob/dev/packages/input/src/input.vue。如下图：

（2）在input.vue中查看autosize 方法（element-ui就是由这个方法控制文本域高度的）

（3）resizeTextarea方法

resizeTextarea方法中，calcTextareaHeight方法是通过外部应用过来的，这个说起来比较麻烦，后面会贴代码，有兴趣的可以研究一下。然后其他的我们都了解怎么用了。最后就是看一下这个方法在哪里调用了，即触发情况。

（3）resizeTextarea触发时机（文件中搜索只有四次）

①毫无疑问：定义也是一次

②mounted中调用

③watch监听文本的值变动后调用

特别注意：里面的this.$nextTick不要遗漏。

3. 项目中实际使用及其代码

（1) calcTextareaHeight.js

文件路径：/src/utils/calcTextareaHeight.js

这里的calcTextareaHeight.js文件和element-ui里面的没有丝毫改动

let hiddenTextarea;const HIDDEN_STYLE = `height:0 !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;right:0 !important`;const CONTEXT_STYLE = ['letter-spacing','line-height','padding-top','padding-bottom','font-family','font-weight','font-size','text-rendering','text-transform','width','text-indent','padding-left','padding-right','border-width','box-sizing'];function calculateNodeStyling(targetElement) {const style = window.getComputedStyle(targetElement);const boxSizing = style.getPropertyValue('box-sizing');const paddingSize = (parseFloat(style.getPropertyValue('padding-bottom')) +parseFloat(style.getPropertyValue('padding-top')));const borderSize = (parseFloat(style.getPropertyValue('border-bottom-width')) +parseFloat(style.getPropertyValue('border-top-width')));const contextStyle = CONTEXT_STYLE.map(name => `${name}:${style.getPropertyValue(name)}`).join(';');return {contextStyle, paddingSize, borderSize, boxSizing };}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.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';let height = hiddenTextarea.scrollHeight;const result = {};if (boxSizing === 'border-box') {height = height + borderSize;} else 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 * maxRows;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;};

（2) 文本域组件 new-textarea.vue (名字任意,别取textarea)

文件路径：/src/components/new-textarea.vue

<template><textarea :style="textareaCalcStyle"v-model="nValue" key="chapTextarea" id="textareaId" class="textarea" placeholder="请输入内容" wrap="hard"></textarea></template><script>import calcTextareaHeight from '../utils/calcTextareaHeight.js'export default {props: {value: {type: String,default: ''},maxRows: {type: Number,default: 4, // 可以根据实际情况设置，也可以设置max-height来做限制}},data () {return {nValue: this.value,textareaCalcStyle: {}}},watch: {value: {handler (v) {if (this.nValue !== v) {this.nValue = v;}this.$nextTick(() => {this.resizeTextarea();})}},nValue: {handler (v) {this.$emit('input',v);}}},mounted () {this.$nextTick(() => {this.resizeTextarea();})},methods: {resizeTextarea() {const maxRow = this.maxRows;this.textareaCalcStyle = calcTextareaHeight(this.$el, 1, maxRow);},}}</script>

（3) 要使用文本域高度自适应的页面(例如index.vue)

文件路径：/src/views/index.vue

引入textarea.vue组件，注册，在页面上使用

// 引入import newTextarea from '../components/new-textarea'// 注册export default {components: {newTextarea },}// 使用<newTextarea v-model="textVlaue"></newTextarea>

（4)效果

①内容为空时

②输入回车时

③html中

总结

太难了