个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 38 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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如何实现变量表达式选择器的文章就讲到这里了,如果你想了解更多关于Vue如何实现变量表达式选择器的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

38 4 0
文章推荐： C++与Lua交互原理实例详解
文章推荐： Vue包大小优化的实现(从1.72M到94K)
文章推荐： WebStorm无法正确识别Vue3组合式API的解决方案
文章推荐： C++命名空间实例详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com