服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - Vue如何实现变量表达式选择器

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

2022-01-20 16:57紫圣 vue.js

这篇文章主要介绍了Vue如何实现变量表达式选择器,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下

在 input 输入框中输入表达式在中台项目中是比较常见的场景。其通常是输入一个特定的字符时(如 $ 字符),显示下拉列表,用户点选下拉列表中的变量,然后继续在 input 输入框中输入其它运算符,组成一个表达式,其效果如下图:

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

在之前的项目中,使用 React + TypeScrpt 实现了React版的变量表达式选择器,在本文中,我们将会介绍使用Vue如何实现一个变量表达式选择器

该变量表达式将会实现以下效果:

  1. 当在输入框中输入特定字符时,显示下拉列表;
  2. 可通过键盘上下键切换下拉选项,鼠标点击下拉选项或者按下 enter 键,选中内容显示到输入框上;
  3. 光标移到已输入字符的任意位置,选择下拉列表的内容,选中的内容显示在当前光标所在的位置;
  4. 当显示下拉列表,但未选择下拉列表的内容时,input输入框将会被禁止输入,只有选中内容后才允许继续在输入框中输入内容
  5. 禁止显示输入框的历史记录;

定义HTML结构

由于现有的 select 选择器无法实现我们想要的效果,因此我们需要自己实现一个select选择器。使用 input 标签作为我们的select选择器的输入框,ul li 标签作为select选择器的下拉列表。其基本的HTML结构如下:

?
1
2
3
4
5
6
7
8
<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 属性。

?
1
<input ref="inputRef" />

除了给 input 标签添加 ref 属性,还需要给 input 标签绑定事件。在 Vue 中,通常使用 v-on (缩写:@ ) 绑定事件。我们给 input 标签绑定 blur、keydown、input 事件。

?
1
2
3
4
5
6
7
8
9
10
11
12
<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 绑定的事件处理函数如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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-* 属性来存储选项值。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 事件。

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

全局监听键盘事件

全局监听键盘事件,其实就是把事件绑定到 document 上。我们在 created 生命周期钩子中监听键盘事件。如果当前按下的键是上、下键,则可以通过上、下键来切换下拉选项。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
 }
 };
},

通过键盘上下键切换选择器下拉选项的处理逻辑如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 键盘 上、下键 选择 表达式
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 深入了解。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/**
 * 插入文本
 * @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实现变量表达式选择器的资料请关注服务器之家其它相关文章!

原文链接:https://juejin.cn/post/6928368607634128904

延伸 · 阅读

精彩推荐
  • vue.jsVue2.x-使用防抖以及节流的示例

    Vue2.x-使用防抖以及节流的示例

    这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Kyara6372022-01-25
  • vue.jsVue2.x 项目性能优化之代码优化的实现

    Vue2.x 项目性能优化之代码优化的实现

    这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...

    优小U9632022-02-21
  • vue.jsVue多选列表组件深入详解

    Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...

    yukiwu6752022-01-25
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看过很多人讲vue的生命周期,但总是被绕的云里雾里,尤其是自学的同学,可能js的基础也不是太牢固,听起来更是吃力,那我就已个人之浅见,以大白话...

    CRMEB技术团队7992021-12-22
  • vue.jsVue项目中实现带参跳转功能

    Vue项目中实现带参跳转功能

    最近做了一个手机端系统,其中遇到了父页面需要携带参数跳转至子页面的问题,现已解决,下面分享一下实现过程,感兴趣的朋友一起看看吧...

    YiluRen丶4302022-03-03
  • vue.js详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Latteitcjz6432022-02-12
  • vue.jsVue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    十里不故梦10222021-12-31
  • vue.js用vite搭建vue3应用的实现方法

    用vite搭建vue3应用的实现方法

    这篇文章主要介绍了用vite搭建vue3应用的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    Asiter7912022-01-22