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

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

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

 

1、禁止select框的enter事件

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

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

所以设置enter键的禁止无效

 

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

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

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

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

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

 

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

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

 

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

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