vue 移动端跳页搜索自动获取焦点

最新推荐文章于 2025-03-04 14:30:05 发布

疯糖

最新推荐文章于 2025-03-04 14:30:05 发布

阅读量3.6k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Cynthia_Yue27/article/details/123570064

版权

需求：点击搜索框跳转新页面然后自动获取焦点弹起键盘。
遇到的问题：
input的autofocus属性在android上可以，在ios上不兼容，ios为了安全起见，禁掉了。

解决方案：

使用子路由做新页面
子页面撑满全屏，看起来是一个新页面，并且具有前后路由跳转的功能。
点击父页面的搜索框，跳转子页面的搜索框
！！子页面的路由不能使用懒加载的方式引入，会使自动获取焦点失效。

具体实施部分代码：

// router.js
import { createRouter, createWebHashHistory } from 'vue-router'
import SearchPage from '@/views/Search.vue'
const routes = [
	{
    path: '/planList',
    name: 'PlanList',
    component: () => import('@/views/PlanList.vue')
    children: [{
      path: 'planSearch',
      name: 'PlanSearch',
      component: SearchPage
    }]
  },
]

// 父页面 PlanList.vue
<template>
	<div class="input-box" @click="jumpInputSearch()">
	  <!-- <van-icon name="search" color="#c8c8c8" /> -->
	  <img class="search-icon" src="@/assets/img/public/search.png" />
	  <span>搜索姓名</span>
	</div>
	<router-view></router-view>
</template>
<script setup>
import { useRouter } from 'vue-router'
const route = useRouter()
const jumpInputSearch = () => {
	route.push({ name: 'PlanSearch' })
}
<script>

// 子页面 PlanList.vue
<template>
	<input type="text"
	   placeholder="搜索姓名"
	   v-model.trim="searchData"
	   v-focus>
</template>
<script>
export default {
directives: {
    focus: {
      // 指令的定义
      mounted (el) { // vue2： mounted改成inserted
        el.focus()
      }
    }
  }
}
</script>