Vue でのテキストエリア適応高さソリューションの実装

テキストエリアのサイズ変更() {
 if (this.$isServer) が戻ります;
 const { autosize, type } = this;
 if (type !== 'textarea') return;
 自動サイズ調整の場合
  this.textareaCalcStyle = {
   最小高さ: calcTextareaHeight(this.$refs.textarea).minHeight
  };
  戻る;
 }
 定数 minRows = autosize.minRows;
 定数maxRows = autosize.maxRows;

 this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
}

エクスポートデフォルト関数calcTextareaHeight(
 ターゲット要素、
 最小行数 = 1、
 最大行数 = null
）{
 if (!hiddenTextarea) {
  隠しテキストエリア = document.createElement('テキストエリア');
  document.body.appendChild(隠しテキスト領域)
 }

 させて {
  パディングサイズ、
  境界サイズ、
  ボックスサイズ、
  コンテキストスタイル
 } = ノードスタイルを計算します(ターゲット要素)。

 hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
 hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';

 height = hiddenTextarea.scrollHeight; とします。
 定数結果 = {};

 if (boxSizing === 'border-box') {
  高さ = 高さ + 境界サイズ;
 } そうでない場合 (boxSizing === 'content-box') {
  高さ = 高さ - パディングサイズ;
 }

 隠しテキストエリアの値 = '';
 singleRowHeight を hiddenTextarea.scrollHeight - paddingSize とします。

 minRows !== null の場合 {
  minHeight = singleRowHeight * minRows とします。
  if (boxSizing === 'border-box') {
   minHeight = minHeight + パディングサイズ + 境界線サイズ;
  }
  高さ = Math.max(minHeight, 高さ);
  result.minHeight = `${minHeight}px`;
 }
 maxRows !== null の場合 {
  maxHeight = singleRowHeight * maxRows とします。
  if (boxSizing === 'border-box') {
   maxHeight = maxHeight + パディングサイズ + 境界線サイズ;
  }
  高さ = Math.min(maxHeight, 高さ);
 }
 result.height = `${height}px`;
 hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
 隠しテキストエリア = null;
 結果を返します。
};

if (!hiddenTextarea) {
  隠しテキストエリア = document.createElement('テキストエリア');
  document.body.appendChild(隠しテキスト領域)
}

初期化() {
  this.initAutoResize()
},
自動サイズ変更の初期化（）{
  this.autoResize && this.$nextTick(this.calcResize)
}

 calcResize() {
 this.resetHeight()
 this.calcTextareaH()
},

リセット高さ() {
 this.height = 'auto'
},

calcTextareaH() {
 contentHeight = this.calcContentHeight() とします。
 this.height = this.calcHeightChange(contentHeight) + 'px'
 if (this.needUpdateRows(contentHeight)) {
  this.updateRows(コンテンツの高さ)
 }
 this.oldContentHeight = コンテンツ高さ
},

calcContentHeight() {
 const { パディングサイズ } = this.calcNodeStyle(this.$el)
 これを返します。$el.scrollHeight - paddingSize
},

計算: {
 ...
 1行の高さ() {
  this.calcContentHeight() / Number(this.rows) || 0 を返します
 }
 ...
}

 this.oldContentHeight = コンテンツ高さ

行の更新が必要です(新しいコンテンツの高さ) {
  this.oldContentHeight !== newContentHeight を返します
},

行を更新(コンテンツの高さ) {
  this.$emit('getRows', Math.round(contentHeight / this.oneRowsHeight))
}