Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to achieve a high degree of textarea adaptation in Vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Hidden problems

Apart from native JS, most of the framework's UI libraries support adaptive textarea height functionality, but one function is generally ignored, that is, adaptive high echo.

When using these libraries, we can easily type in textarea, and automatically extend one line when out of range to ensure that the content is highly adaptive. When we submit content and use the same UI to render on other pages, the trouble comes. Some UI libraries do not support adaptive echo, which requires us to calculate a base value between row height, number of rows, or even height, so as to achieve echo.

A solution to adaptive height

There are two common solutions, one is to add a ghost dom in the "remote areas" of the page to simulate input line breaks, this dom may be a div with the editable attribute of true or a textarea that feels the same.

Take the input component of element-ui, for example, when we enter a value in the component, the resizeTextarea method is called.

ResizeTextarea () {if (this.$isServer) 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.textareaCalcStyle = calcTextareaHeight (this.$refs.textarea, minRows, maxRows);}

When autosize is set to true, textarea is set to adaptive height. At this point, the height of the textarea is calculated in real time by the calcTextareaHeight method.

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 [XSS _ clean] & hiddenTextarea [XSS _ clean] .removeChild (hiddenTextarea); hiddenTextarea = null; return result;}

We can see

If (! hiddenTextarea) {hiddenTextarea = document.createElement ('textarea'); document.body.appendChild (hiddenTextarea);}

Element-ui creates a dom for textarea and copies the real textarea style to hiddenTextarea through the calculateNodeStyling method (overflow is out of sync, the real textarea is hidden). Then listen to the input value of textarea and synchronize it to hiddenTextarea. At the same time, synchronize the scrollHeight of hiddenTextarea to the height of textarea, and then destroy the dom.

With regard to style synchronization, element uses two API, getComputedStyle and getPropertyValue. Of course, you can also use the mixin of the css preprocessor if you package it yourself.

The second scenario is similar to the first, but no additional dom is created. An example of a vue-awesome-textarea that begins with:

Init () {this.initAutoResize ()}, initAutoResize () {this.autoResize & & this.$nextTick (this.calcResize)}

When the page mounted or content changes and the adaptive height autoResize is turned on, the this.calcResize method is executed.

CalcResize () {this.resetHeight () this.calcTextareaH ()}, resetHeight () {this.height = 'auto'}, calcTextareaH () {let contentHeight = this.calcContentHeight () this.height = this.calcHeightChange (contentHeight) +' px' if (this.needUpdateRows (contentHeight)) {this.updateRows (contentHeight)} this.oldContentHeight = contentHeight}, calcContentHeight () {const {paddingSize} = this.calcNodeStyle (this.$el) return this.$el.scrollHeight-paddingSize}

ResetHeight () is used to initialize the height of the textarea, which defaults to auto. The calcTextareaH () method is used to calculate the height of the content area (the scrollHeight of textarea minus the height of padding), and synchronize the calculated height to the height of textarea in real time:

This.height = this.calcHeightChange (contentHeight) + 'px'

Compared to scenario 1, this scheme uses the same idea (dynamic modification height), but reduces the additional dom creation and destruction process.

In addition, vue-awesome-textarea also supports callback to the number of rows in the adaptive process, which can better support data echo. The method of implementation is also simple:

Computed: {... OneRowsHeight () {return this.calcContentHeight () / Number (this.rows) | | 0}.}

In computed we calculate the height of a single line, and when we execute the this.calcTextareaH () method, we record the height of the content:

This.oldContentHeight = contentHeight

Then we will compare whether there is an add line operation, and once added, the height of the new content will be different from that of the old content:

NeedUpdateRows (newContentHeight) {return this.oldContentHeight! = = newContentHeight}

At this point we will emit the latest line height to the outside of the component:

UpdateRows (contentHeight) {this.$emit ('getRows', Math.round (contentHeight / this.oneRowsHeight))} "how to implement the textarea adaptive height scheme in Vue" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.