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


Posted in Vue.js onFebruary 18, 2021

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

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

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

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

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

定义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="inputRef" />

除了给 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 事件。

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

全局监听键盘事件

全局监听键盘事件,其实就是把事件绑定到 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实现变量表达式选择器的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
详解Vue的七种传值方式
Feb 08 #Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
You might like
初级的用php写的采集程序
2007/03/16 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
JQuery toggle使用分析
2009/11/16 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
浅析JSONP技术原理及实现
2016/06/08 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python实现类的静态变量用法实例
2015/05/08 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python实现简单flappy bird
2018/12/24 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
python3让print输出不换行的方法
2020/08/24 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
污水厂厂长岗位职责
2014/01/04 职场文书
团队队名口号大全
2014/06/06 职场文书
广告业务员岗位职责
2015/02/13 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
大学学生会竞选稿
2015/11/19 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript