1. 程式人生 > >vue進頁面第一個input框自動獲得焦點

vue進頁面第一個input框自動獲得焦點

方式一:自定義指令使得進入頁面自動獲得焦點 

<input v-focus type="text">
// 註冊一個全域性自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被繫結的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

方式二:mounted中寫,這種方法最好別用,會出現bug

<input v-focus type="text" ref="userName">
mounted(){
    this.$nextTick(function(){
      this.$refs.userName.focus()
    })  
  }