文章目录
前言一、通过隐藏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中
总结
太难了