vue項目中input框自動獲取焦點的隨記

此文章的記錄主要爲了以後如果遇到相同的開發問題，可以快速的解決問題：

vue如何自動獲得input框的焦點呢？官網給出的答案是：自定義指令：v-focus

// 局部指令

directives: {
    focus: {
        // 指令的定義
        inserted: function(el){
            el.focus()
        }
    }
}

// 全局指令

Vue.directive('focus', {
    // 當被綁定的元素插入到DOM中時
    inserted: function(el) {
        // 聚焦元素
        el.focus()
    }
})

如果項目的需求不是一進入就獲得焦點，而是做了相關操作，失去焦點觸發彈窗，點擊確認在找回焦點；或者沒有彈窗，只在失去焦點就判斷是否合法，不合法要找回焦點，那麼此時就可以用下面的方法實現

// 通過vue的ref來獲得dom元素

this.$refs.input.querySelector('input').focus();

// 由於內核的原因ie要特別處理，加一個短暫延時實現

setTimeout(() => {this.$refs.input.querySelector('input').focus();},50);

各位博友如果對你有幫助，一分也是愛