Vue中自动获取input焦点

版权声明：转载请声明出处 https://blog.csdn.net/weixin_40890907/article/details/82346042

<input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="search-inp" placeholder="搜线路">

1.给input属性添加autofocus属性，缺点autofocus 在移动版 Safari 上不工作

2.Vue官网给出的解决办法

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) //组件注册，与created、mounted同级 directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } //使用方式 <input v-focus>  inserted（钩子函数）：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

 3.适合Vue

mounted () {
    this.$nextTick(() => {
        this.$refs.input.focus()
    })
}

 但是我发现，这些方法都没解决第一次进入页面，input获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。