el-button 點擊后依然處於聚焦狀態導致的問題

前言

　　今天在做一個電子掃碼槍的時候，遇到了彈窗關不掉的問題....

場景描述

　　彈窗1已經在頁面上打開，在彈窗1點擊某個按鈕，會彈出另外一個掃碼彈窗2，當掃碼槍讀取完數據后，會自動觸發關閉掃碼彈窗2，

　　可是就在這個時候，彈窗2卻怎么都關不掉了，關閉后又被觸發打開了，剛開始一直找不到原因，嘗試改了很多都沒生效，最后才知道是彈窗1的el-button點擊后

　　焦點一直在上面，關閉彈窗2后，又觸發了一次焦點點擊事件導致彈窗2一直關不掉。

解決辦法

　　當彈窗1點擊按鈕后，自動去掉聚焦

代碼如下：

　　

<el-button ref="saveBtn" size="small" type="primary" @click.native="submit">保存</el-button>

...

methods: {
    submit(evt) {
        let target = evt.target;
        if(target.nodeName == "SPAN"){
            target = evt.target.parentNode;
        }
        target.blur()
    }
}

原因：

下圖為el-button的結構：

 

 el-button結構圖

點擊button的時候，如果點擊到文字（即span）上，這個時候evt.target是span標簽，這個時候是沒法直接觸發其父節點button的blur方法的，也就沒法強制button失去焦點。所以需要判斷點擊的是span還是button。