How to implement variable expression selector in Vue

<div class="expressionContainer">
 <input />
 <div v-if="visible" class="expressionListBox">
 <ul class="expressionUlBox">
  <li></li>
 </ul>
 </div>
</div>

<input ref="inputRef" />

<input
 ref="inputRef"
 v-model="expressValue"
 class="ant-input"
 :readOnly="readonly ? true : false"
 autoComplete="off"
 :placeholder="placeholder"
 @blur="inputOnBlurHandle"
 @keydown="inputOnKeyDownHandle"
 @change="onchangeHandle"
 @input="onInputHandle"
/>

// Input box keydown event inputOnKeyDownHandle(e) {
 // Press shift + $ keys at the same time if (e.keyCode === 52 && e.shiftKey) {
 // Get the value of the input box const expressValue = e.target.value;
 this.setInputValue(expressValue);

 // Get the current cursor position const position = getPositionForInput(this.$refs.inputRef);
 // The starting position of the current cursor const cursorIndex = position.start;

 // Set the cursor position to the range property of input // updateRange(this.$refs.inputRef);

 // Save the starting position of the cursor this.saveCursorIndex({ start: cursorIndex });
 // Set the drop-down selection box to display this.setSelectedBoxVisible(true);
 // Set the input tag to be uneditable and only allow selection from the drop-down list this.setInputIsReadonly(true);
 }
},

<ul ref="ulRef" class="expressionUlBox">
 <li
 v-for="(item, index) in options"
 ref="liRef"
 :key="item.field"
 :data-set="item"
 :data-index="index"
 :data-value="item.field"
 tabindex="0"
 @click="liClickHandle"
 @keydown="liKeyDownHandle"
 >
 {{ item.name }}
 </li>
</ul>

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

created() {
 const _this = this;
 document.onkeydown = function () {
 const key = window.event.keyCode;
 // Up and down keysif (key === 38 || key === 40) {
  _this.upAndDownKeySwitch(key);
 }
 //Left and right keys else if (key === 39 || key === 37) {
  // _this.leftAndRightKeySwitch(key);
 }
 };
},

// Keyboard up and down key selection expression upAndDownKeySwitch(key) {
 const liNodes = this.$refs.liRef;
 const liLength = liNodes.length;

 // Dw Arrow key if (liNodes && liLength && key === 40) {
 const count =
  this.arrowCount.dwArrow === liLength - 1
  ? 0
  : this.arrowCount.dwArrow + 1;
 // Set padding to solve the problem that the first li cannot be displayed in the visible area when it gets the focus if (liLength > 1) {
  if (count === 0) {
  this.$refs.ulRef.style.padding = "40px 0 10px 0";
  } else {
  this.$refs.ulRef.style.padding = "10px 0";
  }
 }
 
 // The current li element gets the focus liLength && liNodes[count].focus();
 // Set the scrollTop of ul so that the currently focused li element is displayed in the visible area if (count === liLength - 1) {
  //Solve the problem that the last li element cannot be displayed in the visible area this.$refs.ulRef.scrollTop = count * 40;
 } else {
  this.$refs.ulRef.scrollTop = count * 10;
 }

 // Save the count status to the component's content state this.arrowCount = { upArrow: count, dwArrow: count };
 }

 // Up Arrow key if (liNodes && liLength && key === 38) {
 const count =
  this.arrowCount.upArrow <= 0
  ?liLength - 1
  : this.arrowCount.upArrow - 1;
 // Set padding to solve the problem that the first li cannot be displayed in the visible area when it gets the focus if (liLength > 1) {
  if (count === liLength - 1) {
  this.$refs.ulRef.style.padding = "10px 0 40px 0";
  } else {
  this.$refs.ulRef.style.padding = "10px 0";
  }
 }
 // The current li element gets the focus liNodes[count].focus();
 // Set the scrollTop of ul, so that the currently focused li element is displayed in the visible area this.$refs.ulRef.scrollTop = count * 60;
 // Save the count status to the component's content state this.arrowCount = { upArrow: count, dwArrow: count };
 }
},

/**
 * Insert text * @param ctrl input element object (input, textarea, etc.)
 * @param inputValue the value of the input box*/
export function insertAtCursor(ctrl, inputValue) {
 // IE support
 if (document.selection) {
 ctrl.focus();
 // document.selection.createRange() 
 // Returns a TextRange object based on the current text selection, or a ControlRange object based on the control selection const sel = document.selection.createRange();
 // Set text to the current TextRange object sel.text = inputValue;
 } else if (ctrl.selectionStart || ctrl.selectionStart === 0) {
 // selectionStart The starting position of the text selection area // selectionEnd The ending position of the text selection area // MOZILLA and others
 const startPos = ctrl.selectionStart;
 const endPos = ctrl.selectionEnd;
 // Insert value at cursor position ctrl.value =
  // The value before the cursor position ctrl.value.substring(0, startPos) +
  //The value to be inserted inputValue +
  //The value after the cursor position ctrl.value.substring(endPos, ctrl.value.length);
 // Reset the cursor position // After inserting the value, the cursor position should be at the end of the string // The blinking cursor on the page is actually a special selection with a width of 0. In simple terms, the left and right boundaries of the selection intersect to form the cursor ctrl.selectionStart = startPos + inputValue.length;
 ctrl.selectionEnd = startPos + inputValue.length;
 } else {
 ctrl.value += inputValue;
 }
 // The input element object (input, textarea) regains focus. At this time, the cursor position should be at the end of the input characters ctrl.focus();
}