Vue中textarea自適應高度方案的實現
先給方案，Vue棧有需求的同學可以直接下載vue-awesome-textarea
隱藏的問題
拋開原生JS，框架的大部分UI庫都支持自適應textarea高度功能，但普遍都忽略了一個功能，就是自適應高度的回顯。
使用這些庫的時候，我們很容易的在textarea中鍵入內容，超出范圍時會自動延展一行，保證內容高度的自適應。當我們提交內容，在其它頁面使用同樣的UI來渲染時，麻煩的就來了，有些UI庫是不支持自適應回顯的，這就需要我們通過行高、行數甚至高度之間的計算得出一個基值，從而實現回顯。
解決自適應高度的方案
常見得方案有兩種，一種是在頁面地“邊遠地區(qū)”添加一個ghost dom來模擬輸入換行，這個dom的可能是editable屬性為true的div或者是一個一摸一樣得textarea。
以element-ui的input組件舉例，當我們在組件內輸入值時，會調用resizeTextarea方法
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);
}當設置了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.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;
};我們可以看到
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea);
}element-ui創(chuàng)建了一個textarea的dom，通過calculateNodeStyling方法將真正的textarea的樣式復制給hiddenTextarea（overflow不同步，真正的textarea是為hidden）。接著監(jiān)聽textarea的輸入值，同步給hiddenTextarea。同時將hiddenTextarea的scrollHeight同步給textarea的高度，最后再將dom銷毀掉。
關于樣式的同步，element這里用了getComputedStyle和getPropertyValue這兩個API。當然，如果你自己封裝的話，也可以使用css預處理器的mixin。
第二種方案與第一種方案類似，不過不會創(chuàng)建額外的dom。以開頭的vue-awesome-textarea舉例：
init() {
this.initAutoResize()
},
initAutoResize () {
this.autoResize && this.$nextTick(this.calcResize)
}在頁面mounted或者內容變動且開啟自適應高度autoResize的時候，執(zhí)行this.calcResize方法。
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()是來初始化textarea的高度，默認為auto。calcTextareaH()方法是用來計算內容區(qū)域的高度（textarea的scrollHeight減去padding的高度），同時將計算好的高度實時同步給textarea的高：
this.height = this.calcHeightChange(contentHeight) + 'px'
相比方案一，這個方案采用的思路相同（動態(tài)修改高度），但是減少了額外的dom創(chuàng)建和銷毀的過程。
此外，vue-awesome-textarea還支持在自適應的過程中回調行數，可以更好的支持數據回顯。實現的方法也很簡單：
computed: {
? ...
? oneRowsHeight() {
? ? return this.calcContentHeight() / Number(this.rows) || 0
? }
? ...
}在computed中我們計算出單行的高度，同時在執(zhí)行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自適應內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue實現樹狀表格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
最近去面試的人都會有這個體會,去年面試官只問我怎么用vue,今年開始問我vue響應式原理，本文就詳細的介紹一下2021-08-08
這篇文章主要為大家介紹了vue中key使用的問題示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
本文主要介紹了Vue3+Element+Ts實現表單的基礎搜索重置等功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue2之簡易的pc端短信驗證碼的問題,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
最近領導交我一個項目是使用 vue-cli 搭建的單頁面應用。下面小編通過本文給大家介紹vue將單頁面改造成多頁面應用的方法 ，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了詳解vue掛載到dom上會發(fā)生什么，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue2中使用quill編輯器+表格功能,本文分步驟結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
本篇文章主要介紹了詳解Vue使用命令行搭建單頁面應用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
下面小編就為大家分享一篇Vue.js實現圖片的隨意拖動方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03