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

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

まず解決策を提示してください。Vueスタックが必要な学生はvue-awesome-textareaを直接ダウンロードできます。

隠れた問題

ネイティブ JS とは別に、フレームワークの UI ライブラリのほとんどは、適応型テキストエリアの高さ機能をサポートしていますが、一般的に見落とされがちな機能が 1 つあります。それが適応型の高さエコーです。

これらのライブラリを使用すると、テキストエリアにコンテンツを簡単に入力でき、範囲を超えると自動的に 1 行拡張されるため、コンテンツの適応性が高まります。コンテンツを送信し、同じ UI を使用して他のページでレンダリングすると、問題が発生します。一部の UI ライブラリはアダプティブ エコーをサポートしていないため、エコーを実現するには、行の高さ、行数、さらには高さの間の基本値を計算する必要があります。

適応高さのソリューション

一般的な解決策は 2 つあります。1 つは、ページの「リモート領域」にゴースト DOM を追加して、入力の改行をシミュレートすることです。この DOM は、editable 属性が true に設定された div または同一のテキスト領域である可能性があります。
element-uiの入力コンポーネントを例にとると、コンポーネントに値を入力すると、resizeTextareaメソッドが呼び出されます。

テキストエリアのサイズ変更() {
 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);
}

autosize が true に設定されている場合、テキスト領域は適応型の高さに設定されます。このとき、テキストエリアの高さは calcTextareaHeight メソッドを通じてリアルタイムで計算されます。

エクスポートデフォルト関数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(隠しテキスト領域)
}

Element-ui はテキストエリア DOM を作成し、calculateNodeStyling メソッドを通じて実際のテキストエリアのスタイルを hiddenTextarea にコピーします (オーバーフローは同期されず、実際のテキストエリアは非表示になります)。次に、textarea の入力値を監視し、それを hiddenTextarea に同期します。同時に、hiddenTextarea の scrollHeight を textarea の高さに同期し、最後に dom を破棄します。

スタイルの同期に関しては、要素は getComputedStyle と getPropertyValue の 2 つの API を使用します。もちろん、自分でラップする場合は、CSS プリプロセッサ ミックスインを使用することもできます。

2 番目のソリューションは最初のソリューションと似ていますが、追加の DOM は作成されません。冒頭の vue-awesome-textarea を例に挙げます。

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

ページがマウントされるか、コンテンツが変更され、autoResize がオンになっている場合、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
},

resetHeight() はテキストエリアの高さを初期化するために使用され、デフォルトは auto です。 calcTextareaH() メソッドは、コンテンツ領域の高さ (テキスト領域の scrollHeight からパディングの高さを引いた値) を計算し、計算された高さをテキスト領域の高さにリアルタイムで同期するために使用されます。
this.height = this.calcHeightChange(contentHeight) + 'px'

ソリューション 1 と比較すると、このソリューションは同じアイデア (高さを動的に変更する) を採用していますが、追加の DOM 作成および破棄プロセスが削減されます。
さらに、vue-awesome-textarea は、適応プロセス中の行数のコールバックもサポートしており、データエコーをより適切にサポートできます。実装方法も非常に簡単です。

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

computed では 1 行の高さを計算し、this.calcTextareaH() メソッドを実行するときにコンテンツの高さを記録します。

 this.oldContentHeight = コンテンツ高さ

次に、行の追加操作があるかどうかを確認します。追加されている場合、新しいコンテンツの高さは古いコンテンツの高さと異なります。

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

この時点で、最新の行の高さをコンポーネントの外部に出力します。

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

Vue での textarea の適応型高さソリューションの実装に関するこの記事はこれで終わりです。より関連性の高い Vue textarea の適応型コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 入力行数を固定し、テキストエリアに下線スタイルを追加するVueのアイデアの詳細な説明
  • Vueはテキストエリア内の残りの単語の動的な表示を実装します

<<:  CSS3で実装されたテキストポップアップ効果

>>:  テーブル適応とオーバーフローのいくつかの設定の詳細な説明

推薦する

JavaScript 基礎シリーズ: 関数とメソッド

目次1. 関数とメソッドの違い2. 良い関数の書き方2.1 正確な命名2.1.1 関数の命名2.1....

このリファレンスとJavaScriptのカスタムプロパティの詳細な説明

目次1. このキーワード2. カスタム属性3. 包括的なケース1:タブの実装付録要約する1. このキ...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

Node.js でのクラスター作成に関する簡単な説明

目次クラスタクラスターの詳細クラスター内のイベントクラスター内のメソッドクラスター内の属性クラスター...

回転灯効果を実現するWeChatアプレットの例

序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

CSS ウェイト値(カスケード)の例の詳細な説明

•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...

MySQL でスロークエリログ機能を有効にする方法

MySQL スロー クエリ ログは、問題のあるクエリを追跡するのに非常に役立ちます。現在のプログラム...

Mac での MySql の詳細なインストールと構成

1.ダウンロードしてインストールする公式ウェブサイトからコミュニティ エディションの dmg インス...

HTML マークアップ言語 - リファレンス

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

React antd タブの切り替えによりサブコンポーネントが繰り返し更新される

説明する: Tabs コンポーネントが切り替わると、TabPane に含まれる同じサブコンポーネント...

HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN

垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...

Nginx+Apache の動的および静的分離の導入の詳細な例

Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...

Mysql GTID Mha 設定方法

Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...

TomcatをダウンロードしてLinuxにインストールする詳細な手順

Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...