element-ui?vue?input輸入框自動獲取焦點聚焦怎么實現

本文小編為大家詳細介紹“element-ui vue input輸入框自動獲取焦點聚焦怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“element-ui vue input輸入框自動獲取焦點聚焦怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

element-ui vue input輸入框自動獲取焦點聚焦

有時候會遇到要輸入框自動獲取焦點的情況，解決如下： 

方法一

步驟：

1.在script中寫directives,注冊一個全局的自定義指定 v-focus

 directives: {
   focus: {
      inserted: function(el) {
        el.querySelector("input").focus();
      }
    }
 },

2.在input框直接使用

<el-input
   ...
  v-focus
>
</el-input>

方法二

步驟：

1.給輸入框設置一個ref

<el-input
  ref="saveTagInput"
 >

2.在需要的時候操作ref獲取焦點

this.$refs.saveTagInput.focus();

vue輸入框自動獲取焦點的三種方式

方式一：原生JS操作DOM

<template>
  <div class="focusDemo">
    <input type="text" v-model="username" id='inputId'/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: ''
    }
  },
  mounted () {
    document.getElementById('inputId').focus()
  }
}
</script>

方式二：ref方式實現

<template>
  <div class="focusDemo">
    <input ref="inputName" type="text" v-model="username" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.inputName.focus()
    })
  }
}
</script>

方式三：使用自定義指令

main.js中

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  update: function (el) {
    // 聚焦元素
    el.focus()
  }
})

vue文件中

<template>
  <div class="focusDemo">
    <input type="text" v-model="username" v-focus />
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: ''
    }
  }
}
</script>

讀到這里，這篇“element-ui vue input輸入框自動獲取焦點聚焦怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。