Vue中textarea自適應(yīng)高度方案的實現(xiàn)
先給方案，Vue棧有需求的同學可以直接下載vue-awesome-textarea
隱藏的問題
拋開原生JS，框架的大部分UI庫都支持自適應(yīng)textarea高度功能，但普遍都忽略了一個功能，就是自適應(yīng)高度的回顯。
使用這些庫的時候，我們很容易的在textarea中鍵入內(nèi)容，超出范圍時會自動延展一行，保證內(nèi)容高度的自適應(yīng)。當我們提交內(nèi)容，在其它頁面使用同樣的UI來渲染時，麻煩的就來了，有些UI庫是不支持自適應(yīng)回顯的，這就需要我們通過行高、行數(shù)甚至高度之間的計算得出一個基值，從而實現(xiàn)回顯。
解決自適應(yīng)高度的方案
常見得方案有兩種，一種是在頁面地“邊遠地區(qū)”添加一個ghost dom來模擬輸入換行，這個dom的可能是editable屬性為true的div或者是一個一摸一樣得textarea。
以element-ui的input組件舉例，當我們在組件內(nèi)輸入值時，會調(diào)用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);
}當設(shè)置了autosize為true則textarea設(shè)為自適應(yīng)高度。此時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銷毀掉。
關(guān)于樣式的同步，element這里用了getComputedStyle和getPropertyValue這兩個API。當然，如果你自己封裝的話，也可以使用css預(yù)處理器的mixin。
第二種方案與第一種方案類似，不過不會創(chuàng)建額外的dom。以開頭的vue-awesome-textarea舉例：
init() {
this.initAutoResize()
},
initAutoResize () {
this.autoResize && this.$nextTick(this.calcResize)
}在頁面mounted或者內(nèi)容變動且開啟自適應(yīng)高度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()方法是用來計算內(nèi)容區(qū)域的高度（textarea的scrollHeight減去padding的高度），同時將計算好的高度實時同步給textarea的高：
this.height = this.calcHeightChange(contentHeight) + 'px'
相比方案一，這個方案采用的思路相同（動態(tài)修改高度），但是減少了額外的dom創(chuàng)建和銷毀的過程。
此外，vue-awesome-textarea還支持在自適應(yīng)的過程中回調(diào)行數(shù)，可以更好的支持數(shù)據(jù)回顯。實現(xiàn)的方法也很簡單：
computed: {
? ...
? oneRowsHeight() {
? ? return this.calcContentHeight() / Number(this.rows) || 0
? }
? ...
}在computed中我們計算出單行的高度，同時在執(zhí)行this.calcTextareaH()方法時我們記錄下內(nèi)容高度：
this.oldContentHeight = contentHeight
接著我們會比對是否存在添加行操作，一旦添加則新的內(nèi)容高度和老的內(nèi)容高度會不同：
needUpdateRows(newContentHeight) {
return this.oldContentHeight !== newContentHeight
},此時我們會把最新的行高emit到組件外部：
updateRows(contentHeight) {
this.$emit('getRows', Math.round(contentHeight / this.oneRowsHeight))
}到此這篇關(guān)于Vue中textarea自適應(yīng)高度方案的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue textarea自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+echarts動態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式
這篇文章主要介紹了vue+echarts動態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了重新認識vue之事件阻止冒泡的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了Vue3是如何實現(xiàn)加載動態(tài)菜單功能的，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，需要的可以參考一下2022-07-07
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue中數(shù)組加Key方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用JSEncrypt對密碼本地存儲時加解密的實現(xiàn)
本文主要介紹了vue使用JSEncrypt對密碼本地存儲時加解密，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了Vue的生命周期，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
下面小編就為大家?guī)硪黄獀ue組件初學_彈射小球(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09