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。

可行，是目前最完美的解決辦法。