<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获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。