Vue如何实现变量表达式选择器

目录

• 定义HTML结构
• input 标签绑定属性
• input 标签监听 keydown 事件
• li 标签绑定属性
• li 标签获取焦点
• 全局监听键盘事件
• 设置 input 标签的值

<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 输入框 keydown 事件
inputOnKeyDownHandle(e) {
 // 同时按下 shift + $ 键
 if (e.keyCode === 52 && e.shiftKey) {
 // 获取 input 输入框的值
 const expressValue = e.target.value;
 this.setInputValue(expressValue);
 // 获取当前光标的位置
 const position = getPositionForInput(this.$refs.inputRef);
 // 当前光标的起始位置
 const cursorIndex = position.start;
 // 把 光标的位置设置到 input 的 range 属性上
 // updateRange(this.$refs.inputRef);
 // 保存光标的起始位置
 this.saveCursorIndex({ start: cursorIndex });
 // 设置 下拉选择框 显示
 this.setSelectedBoxVisible(true);
 // 设置 input 标签不可编辑，只能从下拉列表选择内容
 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;
 // 上、下健
 if (key === 38 || key === 40) {
  _this.upAndDownKeySwitch(key);
 }
 // 左、右健
 else if (key === 39 || key === 37) {
  // _this.leftAndRightKeySwitch(key);
 }
 };
},

// 键盘 上、下键 选择 表达式
upAndDownKeySwitch(key) {
 const liNodes = this.$refs.liRef;
 const liLength = liNodes.length;
 // Dw Arrow 键
 if (liNodes && liLength && key === 40) {
 const count =
  this.arrowCount.dwArrow === liLength - 1
  ? 0
  : this.arrowCount.dwArrow + 1;
 // 设置 padding，解决 第一个 li 获取焦点时无法显示在可视区域的问题
 if (liLength > 1) {
  if (count === 0) {
  this.$refs.ulRef.style.padding = "40px 0 10px 0";
  } else {
  this.$refs.ulRef.style.padding = "10px 0";
  }
 }
 // 当前 li 元素获取焦点
 liLength && liNodes[count].focus();
 // 设置 ul 的 scrollTop，是当前获取焦点的 li 元素显示在可视区域
 if (count === liLength - 1) {
  // 解决最后一个 li 元素无法显示在可视区域的问题
  this.$refs.ulRef.scrollTop = count * 40;
 } else {
  this.$refs.ulRef.scrollTop = count * 10;
 }
 // 保存 count 的状态到 组件的内容 state 里
 this.arrowCount = { upArrow: count, dwArrow: count };
 }
 // Up Arrow 键
 if (liNodes && liLength && key === 38) {
 const count =
  this.arrowCount.upArrow <= 0
  ? liLength - 1
  : this.arrowCount.upArrow - 1;
 // 设置 padding，解决 第一个 li 获取焦点时无法显示在可视区域的问题
 if (liLength > 1) {
  if (count === liLength - 1) {
  this.$refs.ulRef.style.padding = "10px 0 40px 0";
  } else {
  this.$refs.ulRef.style.padding = "10px 0";
  }
 }
 // 当前 li 元素获取焦点
 liNodes[count].focus();
 // 设置 ul 的 scrollTop，是当前获取焦点的 li 元素显示在可视区域
 this.$refs.ulRef.scrollTop = count * 60;
 // 保存 count 的状态到 组件的内容 state 里
 this.arrowCount = { upArrow: count, dwArrow: count };
 }
},

/**
 * 插入文本
 * @param ctrl 输入元素对象(input、textarea 等)
 * @param inputValue 输入框 的 value 值
 */
export function insertAtCursor(ctrl, inputValue) {
 // IE support
 if (document.selection) {
 ctrl.focus();
 // document.selection.createRange() 
 // 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象
 const sel = document.selection.createRange();
 // 给当前的 TextRange 对象设置文本
 sel.text = inputValue;
 } else if (ctrl.selectionStart || ctrl.selectionStart === 0) {
 // selectionStart 文本选中区域的开始位置
 // selectionEnd 文本选中区域的结束位置
 // MOZILLA and others
 const startPos = ctrl.selectionStart;
 const 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 = startPos + inputValue.length;
 } else {
 ctrl.value += inputValue;
 }
 // 输入元素对象(input、textarea)重新获取焦点，此时光标位置应该在已输入字符的最后面
 ctrl.focus();
}