在 input 输入框中输入表达式在中台项目中是比较常见的场景。其通常是输入一个特定的字符时(如 $ 字符),显示下拉列表,用户点选下拉列表中的变量,然后继续在 input 输入框中输入其它运算符,组成一个表达式,其效果如下图:
在之前的项目中,使用 React + TypeScrpt 实现了React版的变量表达式选择器,在本文中,我们将会介绍使用Vue如何实现一个变量表达式选择器。
该变量表达式将会实现以下效果:
- 当在输入框中输入特定字符时,显示下拉列表;
- 可通过键盘上下键切换下拉选项,鼠标点击下拉选项或者按下 enter 键,选中内容显示到输入框上;
- 光标移到已输入字符的任意位置,选择下拉列表的内容,选中的内容显示在当前光标所在的位置;
- 当显示下拉列表,但未选择下拉列表的内容时,input输入框将会被禁止输入,只有选中内容后才允许继续在输入框中输入内容
- 禁止显示输入框的历史记录;
定义HTML结构
由于现有的 select 选择器无法实现我们想要的效果,因此我们需要自己实现一个select选择器。使用 input 标签作为我们的select选择器的输入框,ul li 标签作为select选择器的下拉列表。其基本的HTML结构如下:
<div class="expressionContainer">
<input />
<div v-if="visible" class="expressionListBox">
<ul class="expressionUlBox">
<li></li>
</ul>
</div>
</div>
input 标签绑定属性
在 Vue 中,如果要给一个元素或子组件注册引用信息,需要添加 ref 属性。使用 ref 注册的引用信息将会注册在父组件的 refs 对象上,可以通过refs对象上,可以通过refs 对象找到需要进行操作的元素或子组件。因此,我们给 input 标签添加 ref 属性。
除了给 input 标签添加 ref 属性,还需要给 input 标签绑定事件。在 Vue 中,通常使用 v-on (缩写:@ ) 绑定事件。我们给 input 标签绑定 blur、keydown、input 事件。
<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 事件
给 input 标签绑定 keydown 事件,监听此时按下的键盘的键,如果同时按下的是 shift + $ ,则显示下拉列表,保存input输入框中当前的值,并将 input 标签设置为不可编辑,只能从下拉列表中选择内容。keydown 绑定的事件处理函数如下:
// 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);
}
},
li 标签绑定属性
select 选择器是使用 ul li 标签来实现的,当我们选择下拉选项时,需要对 li 标签进行操作,因此需要给 li 标签添加 ref 属性和 click、keydown 事件,并利用HTML5 的 data-* 属性来存储选项值。
<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 标签获取焦点
对于普通的 div/span/li 等元素节点是不能直接获取焦点的。如果需要触发 div/span/li 等元素节点的 onfocus 事件和 onblur 事件,需要为其添加 tabindex 属性。tabindex 属性其实指定了点击计算机 "Tab" 健时光标移动的位置,在点击计算机 "Tab" 健时 tabindex 属性值越小 (最小为 0) 其所在的标签越先得到焦点。
在我们实现的 select 选择器中,需要使用键盘上下键来切换选项值,因此需要给 li 标签添加 tabindex 属性,使 li 可以触发 onfocus 事件和 onblur 事件。
全局监听键盘事件
全局监听键盘事件,其实就是把事件绑定到 document 上。我们在 created 生命周期钩子中监听键盘事件。如果当前按下的键是上、下键,则可以通过上、下键来切换下拉选项。
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 };
}
},
设置 input 标签的值
默认情况下光标移到已输入字符的任意位置,选择某个下拉选项,选项的值会被插入到已输入字符的最后面,而我们想要的效果是选项的值插入到当前光标所在的位置,因此我们需要计算光标所在的位置,将选项的值添加到正确的位置。这里涉及到了光标位置及文本选区的相关知识,可移步Selection 深入了解。
/**
* 插入文本
* @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();
}
完整效果预览
以上就是Vue如何实现变量表达式选择器的详细内容,更多关于Vue实现变量表达式选择器的资料请关注极客世界其它相关文章! |
请发表评论