Vue element下拉菜单实现键盘事件上下移

提高用户体验感,输入框自动聚焦并键盘控制下拉菜单的选项上下移

效果如图:

初期使用的el-dropdown下拉菜单,组件默认可键盘上下移

但是键盘按上下移不生效

可能因为我的el-dropdown-item是由数组遍历出来的,文档的菜单是写死的

换成el-popover组件,内部用ul和li实现遍历菜单

后续需要在input框自动聚焦后再触发键盘上下移事件

实现自动聚焦,首先想到的方法是 给el-input 添加ref，获取后调用focus()

但是不生效,

后续查看element官方文档可用popover的show event手动给el-input获取焦点

还是不生效,

对焦需要下拉打开后执行,也就是dom更新后所以添加 this$nextTick生效

完成搜索输入框的自动对焦后添加键盘事件,

添加的键盘事件让用户看到选择的选项样式变化以外,滚轮是不会变动的,

继续提升用户体验感,需要让滚轮随着用户的 *** 作而滑动

使用Vue框架和element-ui开发时，在el-select下拉框遇见的问题，改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。有人说写个change事件就好了，然而并没有什么卵用，但是change事件需要留着。

话不多说，直接干货。

出现这个问题就是绑定了对象（需求如此），render函数没有自动更新，数据刷新了，但是视图没有刷新，而 this$set 和 this$forceUpdate 就是重新 render 。

解决办法：

1通过 this$set() 解决

注意,修改this$set()的使用方法

2通过 this$forceUpdate() 解决

select 如果有必填校验，切换时把这个有必填校验的设为空，选中之后校验仍旧提示，

当分类一切换时，分类二、三、四等都需要清空原值，重新选取，但是在分类一的 change 事件里，发现页面分类二已经显示，依旧提示没选择，校验失败。

原因是

分类一切换时，清空表单原值使用的是 thisdoorSlowFormdiseCode = ""  手动设为空，校验失败。

解决方案：

使用  this$set(thisdoorSlowForm, "diseCode",  "") 设空值，代替 thisdoorSlowFormdiseCode = ""

当多个级联情况下，下拉赋值值赋不上去，this$focreUpdata() 强制更新，这时值就可以绑定上去，但同时绑定时校验也会失效

解决方案：

1，可以同上设置，使用 this$set() 设空值

2，也可以在分类一切换同时，手动将分类二下拉集合的第一个元素赋值到分类二的值上去。

vue select下拉框绑定默认值：

首先option要加value值，以便v-model可以获取到对应选择的值

一、当没有绑定v-model，直接给对应的option加selected属性

二、当给select绑定了v-model的值的时候，要给v-model绑定的data值里写默认值

一、onChange事件只有在值改变时才可触发，所以必须在每一次选择时（尤其第一次）保证选择的值是改变的！

所以<select name=”inv_payee” id=”ECS_INVPAYEE” οnchange=”show_payee();” style=”border:1px solid #ccc;”>

<option value=”个人” selected >个人</option> //在这要选定一个默认的值 “selected”

<option value=”单位”>单位</option>

</select>

这样在选择第二个时，值就会变即可触发onChange;

二、我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件select的onchange事件就是这样子的你得有Change(改变),才能触发该事件…

<select name=sel οnchange=”bao(thisoptions[thisoptionsselectedIndex]value)”>

<option value=””>请选择

<option value=”1″>Item 1

<option value=”2″>Item 2

<option value=”3″>Item 3

</select>

<script>

function bao(s)

{undefined

txtvalue =s;

//选择后,让第一项被选中,这样,就有Change啦

documentallseloptions[0]selected=true;

}

</script>

<textarea id=txt></textarea>

三、

js中onchange事件是在客户端改变输入控件的值，比如一个textbox，会出发的一个事件。但是如果在js代码中改变一个textbox的value，而不是通过键盘输入改变一个textbox值的话，是不会出发onchange事件的。

那 么，如何在js代码模式通过代码触发textbox控件的onchange事件呢，经过查阅资料，发现js提供了一个方法，可以触发控件的应该是所有事 件。objectfireEvent()方法，使用方法如 objectfireEvent(‘onchange’)，即可触发控件的onchange事件。

同理，js中使用fireEvent方法还可以触发其他的空间事件。

触发onchange事件的问题，并不是值一旦更改就会触发onchange事件。

对于onBlur和onFocus可以直接调用objectBlur()和objectFocus()，但javascript中没有objectChange

事件。

1ie 处理1

documentgetElementByIdx_x(‘hid_provider_id’)attachEvent(“onpropertychange”,function(){alert(‘gggg’);});

2objectfireEvent()可以触发事件，如触发onchange事件则是objectfireEvent(‘onchange’)，以此类推。

例：

<SELECT id=select1 οnchange=”alert(thisvalue)”>

<OPTION value=”0″>0</OPTION>

<OPTION value=”1″>1</OPTION>

<OPTION value=”2″>2</OPTION>

</SELECT>

<INPUT type=”text” id=text1 name=text1>

<INPUT type=”button” value=”Button” οnclick=”select1selectedIndex=text1value”>

手动改变select的值，会触发onchange

脚本改变selectedIndex,不会触发onchange

解决办法

if (select1fireEvent)

select1fireEvent(“onchange”)

else

select1onchange()

或

<INPUT type=”button” value=”Button” οnclick=”select1selectedIndex=text1value；

select1fireEvent(‘onchange’)”>

程序,里因为程序里有多个action里并每个action有多个submit按钮事件，为了区别代码，同时页面隐藏

按钮

<select name=”select” οnchange=”documentgetElementByIdx_x(‘seaoldsubmit’)click();”>

<option value=”0″>查询条件</option>

……

</select>

<input type=”submit” name=”seaoldsubmit” value=”确定” style=”display:none”>

if(submitcheck(‘seaoldsubmit’))

四、最近项目中遇到一个问题，要用js去触发onchange事件。

上网找了一些资料，IE上有onpropertychang事件，可以用js去触发这个事件，但是Firefox不支持这个事件，

然后在firefox中去绑定一个input事件。但是这是无效的啊，仍然不会去触发onchange事件。

最后只能用未解决方案了！

用js修改值的时候，在js执行修改完之后去执行onchange事件，不过这样即使这个值不改变的话也会调用这个方法。

function handle()

{documentgetElementByIdx_x(‘msg’)innerHTML=’输入的文字长度为：’+documentgetElementByIdx_x(‘txt’)valuelength;

}

//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。

if(/msie/itest(navigatoruserAgent)) //ie浏览器

{documentgetElementByIdx_x(‘txt’)onpropertychange=handle

}

else

{//非ie浏览器，比如Firefox

documentgetElementByIdx_x(‘txt’)addEventListener(“input”,handle,false);

}

</script>

</head>

<body id=”mybody”>

<div id=”msg”></div>

<input id=’txt’ value=”” />

以上为测试代码。

五onfocus实现了任意点击，在数据库了也只查询一次

六。onmousedown 单击一次就查询一次，所以每选择一次就查询一次，增加了数据库的负担。

清空？

你的意思是失去焦点后也不再显示了？

要是这样的话，你可以绑定placeholder属性，只要在前面加冒号就可以了。

比如：

<input type="text" :placeholder="holder" @focus="haha()"/>

<script>

new Vue({

  el:"#app",

 data:{

  holder:"这里是input的提示信息",

},

methods:{

 haha:function(){

  thisholder="";

}

}

})

</script>

以上就是关于Vue element下拉菜单实现键盘事件上下移全部的内容，包括:Vue element下拉菜单实现键盘事件上下移、vue+element el-select 选项无法选择的问题、vue el-select校验失效问题解决等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！