element-UI select 踩过的坑和解决办法

今天遇到了一个bug,就是在使用element-UI的select框时，当选中值，会触发@change事件，下拉框消失，可是这时候select框仍是处于获取焦点状态。能够看到select框仍是处于颜色高亮状态。因此当我再次点击enter框时，下拉框再次显示，也会再次触发@change事件。

第一次看到这个bug的时候我是懵逼的，由于我不知道enter键竟然有等同于鼠标左键的效果。而后我试了几个解决方案，如下是个人解决方案及效果。

 

一、禁止select框的enter事件

@keyup.enter,native,prevent;@keydown.enter,native,prevent;可是无效，我百度到一个说法是@change使@keyup.enter,native,prevent;无效，可是我没有设置@change，@keyup.enter,native,prevent;也是无效的

我又尝试了设置@keyup和@keydown来监听键盘事件，可是！可是！select框没法监听键盘事件！！！

因此设置enter键的禁止无效

 

二、选中select数据后，转移页面焦点，使焦点再也不停留在原来的选项上

我尝试当我触发@change时，用this.$refs.inputName.$el.focus()给其余input框添加获取焦点事件，可是这个只有第一次有效。

我又当我触发@change时，用this.$refs.buttonName.$el.click()给其余按钮添加获取点击事件，可是这个并无移除select框的焦点。

我又尝试当我触发@change时，新建一个自动获取焦点的input框，在@change事件的最后，销毁这个input框，可是这个只有第一次有效。

只有第一次奏效，只有第一次有效。

 

三、在绑定的事件上进行判断，阻止往下进行。

未进行尝试，可是是一个可行的办法

 

四、解决办法：给select框绑定disable，判断条件给disable赋值true或者false。

可行，是目前最完美的解决办法。