Vue で変数式セレクターを実装する方法

<div class="式コンテナ">
 <入力 />
 <div v-if="表示可能" クラス="式リストボックス">
 <ul class="式UlBox">
  <li></li>
 </ul>
 </div>
</div>

<input ref="inputRef" />

<入力
 ref="入力参照"
 v-model="expressValue"
 クラス="ant-input"
 :readOnly="読み取り専用 ? true : false"
 オートコンプリート="オフ"
 :placeholder="プレースホルダー"
 @blur="inputOnBlurHandle"
 @keydown="inputOnKeyDownHandle"
 @change="onchangeHandle"
 @input="onInputHandle"
/>

// 入力ボックスのキーダウンイベント inputOnKeyDownHandle(e) {
 // Shift + $ キーを同時に押す if (e.keyCode === 52 && e.shiftKey) {
 // 入力ボックスの値を取得します。const expressValue = e.target.value;
 this.setInputValue(expressValue);

 // 現在のカーソル位置を取得します。const position = getPositionForInput(this.$refs.inputRef);
 // 現在のカーソルの開始位置 const cursorIndex = position.start;

 // カーソルの位置を入力の範囲プロパティに設定します // updateRange(this.$refs.inputRef);

 // カーソルの開始位置を保存します。this.saveCursorIndex({ start: cursorIndex });
 // ドロップダウン選択ボックスを表示するように設定します。this.setSelectedBoxVisible(true);
 // 入力タグを編集不可に設定し、ドロップダウン リストからの選択のみを許可します。this.setInputIsReadonly(true);
 }
},

<ul ref="ulRef" class="expressionUlBox">
 <li
 v-for="(item, index) オプション内"
 ref="liRef"
 :key="アイテム.フィールド"
 :data-set="アイテム"
 :data-index="インデックス"
 :data-value="アイテムフィールド"
 タブインデックス="0"
 @click="liClickHandle"
 @keydown="liKeyDownHandle"
 >
 {{アイテム名}}
 </li>
</ul>

<li tabindex="0"></li>

作成された() {
 _this は定数です。
 document.onkeydown = 関数（）{
 定数キー = window.event.keyCode;
 // 上下キーif (key === 38 || key === 40) {
  _this.upAndDownKeySwitch(キー);
 }
 //左と右のキー else if (key === 39 || key === 37) {
  // _this.leftAndRightKeySwitch(キー);
 }
 };
},

// キーボードの上下キー選択式 upAndDownKeySwitch(key) {
 liNodes を this.$refs.liRef に設定します。
 liNodes の長さを定数で指定します。

 // Dw 矢印キー if (liNodes && liLength && key === 40) {
 定数カウント =
  this.arrowCount.dwArrow === liLength - 1
  ? 0
  : this.arrowCount.dwArrow + 1;
 // フォーカスを取得したときに最初の li が表示領域に表示されない問題を解決するためにパディングを設定します if (liLength > 1) {
  （カウント === 0）の場合{
  this.$refs.ulRef.style.padding = "40px 0 10px 0";
  } それ以外 {
  this.$refs.ulRef.style.padding = "10px 0";
  }
 }
 
 // 現在のli要素がフォーカスを取得します liLength && liNodes[count].focus();
 // 現在フォーカスされている li 要素が可視領域に表示されるように ul の scrollTop を設定します if (count === liLength - 1) {
  // 最後の li 要素が表示領域に表示できない問題を解決します this.$refs.ulRef.scrollTop = count * 40;
 } それ以外 {
  this.$refs.ulRef.scrollTop = count * 10;
 }

 // カウントステータスをコンポーネントのコンテンツ状態に保存します。this.arrowCount = { upArrow: count, dwArrow: count };
 }

 // 上矢印キー if (liNodes && liLength && key === 38) {
 定数カウント =
  this.arrowCount.upArrow <= 0
  ?li長さ - 1
  : this.arrowCount.upArrow - 1;
 // フォーカスを取得したときに最初の li が表示領域に表示されない問題を解決するためにパディングを設定します if (liLength > 1) {
  if (count === liLength - 1) {
  this.$refs.ulRef.style.padding = "10px 0 40px 0";
  } それ以外 {
  this.$refs.ulRef.style.padding = "10px 0";
  }
 }
 // 現在のli要素がフォーカスを取得します liNodes[count].focus();
 // ul の scrollTop を設定して、現在フォーカスされている li 要素が表示領域に表示されるようにします。this.$refs.ulRef.scrollTop = count * 60;
 // カウントステータスをコンポーネントのコンテンツ状態に保存します。this.arrowCount = { upArrow: count, dwArrow: count };
 }
},

/**
 * テキストを挿入 * @param ctrl 入力要素オブジェクト (input、textarea など)
 * @param inputValue 入力ボックスの値*/
エクスポート関数 insertAtCursor(ctrl, inputValue) {
 // IE サポート
 if (ドキュメント選択) {
 Ctrl+Focus();
 // ドキュメント.選択.作成範囲() 
 // 現在のテキスト選択に基づいて TextRange オブジェクトを返すか、コントロール選択に基づいて ControlRange オブジェクトを返します。const sel = document.selection.createRange();
 // 現在の TextRange オブジェクトにテキストを設定します。sel.text = inputValue;
 } そうでない場合 (ctrl.selectionStart || ctrl.selectionStart === 0) {
 // selectionStart テキスト選択領域の開始位置 // selectionEnd テキスト選択領域の終了位置 // MOZILLA など
 定数開始位置 = ctrl.selectionStart;
 定数 endPos = ctrl.selectionEnd;
 // カーソル位置に値を挿入 ctrl.value =
  // カーソル位置の前の値 ctrl.value.substring(0, startPos) +
  //挿入する値 inputValue +
  //カーソル位置の後の値 ctrl.value.substring(endPos, ctrl.value.length);
 // カーソルの位置をリセットします // 値を挿入した後、カーソルの位置は文字列の末尾にある必要があります // ページ上の点滅するカーソルは、実際には幅 0 の特別な選択範囲です。簡単に言えば、選択範囲の左と右の境界が交差してカーソルを形成します ctrl.selectionStart = startPos + inputValue.length;
 ctrl.selectionEnd = 開始位置 + 入力値の長さ;
 } それ以外 {
 ctrl.value += 入力値;
 }
 // 入力要素オブジェクト (input、textarea) がフォーカスを取り戻します。このとき、カーソルの位置は入力文字の末尾にあるはずです。ctrl.focus();
}