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。

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