Vue实现变量表达式选择器的方法

　　介绍

这篇文章给大家分享的是有关Vue实现变量表达式选择器的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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

Vue实现变量表达式选择器的方法

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

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

<李>

当在输入框中输入特定字符时,显示下拉列表;

<李>

可通过键盘上下键切换下拉选项,鼠标点击下拉选项或者按下输入键,选中内容显示到输入框上;

<李>

光标移到已输入字符的任意位置,选择下拉列表的内容,选中的内容显示在当前光标所在的位置;

<李>

当显示下拉列表,但未选择下拉列表的内容时,输入输入框将会被禁止输入,只有选中内容后才允许继续在输入框中输入内容

<李>

禁止显示输入框的历史记录;

定义HTML结构

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

& lt; div 类=癳xpressionContainer"比; 　　,& lt; input /比; 　　,& lt; div  v=皏isible",类=癳xpressionListBox"比; 　　,& lt; ul 类=癳xpressionUlBox"比; 　　& lt;才能li> & lt;/li> 　　,& lt;/ul> 　　,& lt;/div> 　　& lt;/div>

输入标签绑定属性

在Vue中,如果要给一个元素或子组件注册引用信息,需要添加ref属性。使用ref注册的引用信息将会注册在父组件的参考文献对象上,可以通过裁判对象上,可以通过裁判对象找到需要进行操作的元素或子组件,因此,我们给输入标签添加ref属性。

& lt; input  ref=癷nputRef",/在

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

& lt;输入 　　,ref=癷nputRef" 　　,v模型=癳xpressValue" 　　,类=癮nt-input" 　　,:只读的=皉eadonly  ?, true :, false" 　　,自动完成=皁ff" 　　,:占位符=皃laceholder" 　　,@blur=癷nputOnBlurHandle" 　　,@keydown=癷nputOnKeyDownHandle" 　　,@change=皁nchangeHandle" 　　,@input=皁nInputHandle"/在

输入标签监听keydown事件

给输入标签绑定keydown事件,监听此时按下的键盘的键,如果同时按下的是shift + $,则显示下拉列表,保存输入输入框中当前的值,并将输入标签设置为不可编辑,只能从下拉列表中选择内容.keydown绑定的事件处理函数如下:

//, Input 输入框,keydown 事件 　　inputOnKeyDownHandle (e), {//大敌;同时按下,shift  +,美元键 　　,if  (e.keyCode ===, 52岁,,,,e.shiftKey), { 　　,//获取,input 输入框的值 　　,const  expressValue =, e.target.value; 　　,this.setInputValue (expressValue); 　　 　　,//获取当前光标的位置 　　,const  position =, getPositionForInput(这一点。refs.inputRef美元); 　　,//当前光标的起始位置 　　,const  cursorIndex =, position.start; 　　 　　,//把,光标的位置设置到,input 的,range 属性上 　　,//updateRange(这一点。refs.inputRef美元); 　　 　　,//保存光标的起始位置 　　,this.saveCursorIndex({,开始:cursorIndex }); 　　,//设置,下拉选择框,显示 　　,this.setSelectedBoxVisible(真正的); 　　,//设置,input 标签不可编辑,只能从下拉列表选择内容 　　,this.setInputIsReadonly(真正的); 　　,} 　　},

李标签绑定属性

选择选择器是使用ul李标签来实现的,当我们选择下拉选项时,需要对李标签进行操作,因此需要给李标签添加ref属性和点击,keydown事件,并利用HTML5的数据- *属性来存储选项值。

& lt; ul  ref=皍lRef",类=癳xpressionUlBox"比; 　　& lt;李 　　,v=?项目,,指数),拷贝options" 　　,ref=發iRef" 　　,:关键=癷tem.field" 　　,:先于=癷tem" 　　,:材料指数=癷ndex" 　　,:数据值=https://www.yisu.com/zixun/癷tem.field” 　　tabindex=" 0 " 　　@click=" liClickHandle " 　　@keydown=" liKeyDownHandle "> 　　{{item.name}} 　　李

Vue实现变量表达式选择器的方法