解决：h5进入页面拉起键盘ios不生效问题

通常我们在一进入页面使用mouted方法执行

this.$nextTick(() => {
        var sea = document.querySelector('.header-search-input')
        sea.focus()
      })

即可实现，经测试安卓可以，但是ios不能聚焦，也弹出不了键盘
搜索资料发现，ios之所以不能弹出键盘是因为ios必须通过触发一个方法才能拉起键盘
这里想着怎么在页面中触发。

要默认触发必须得保证该元素存在，查资料发现 display为none的时候也不会触发

所以页面输入框元素不能用v-show 更不能用v-if

解决方法：
带有输入框页面为b页面。通过事件跳到b页面的a页面
把b页面的输入框写成组件
在a页面就引用此组件，并将组件的样式设为

  .inp {
        position: absolute;
        width: 0px;
        height: 0px;
        top: -100px;
        left: -100px;
        z-index: -1;
      }

即 在a页面不展示此组件 但是要在点击事件触发跳转到b页面之前，将a组件的光标聚焦---focus方法。
在b页面也同时使用此组件即可 只是在b页面要把输入框样式改为正常样式。
（若有c页面返回到b页面，需要拉起键盘。则需要在c页面也引用此输入组件，样式设为隐藏，在c的返回事件里 再调用一遍focus）

注意：this.$nextTick(() => {
}) 最好将focus方法套在这个方法里 才能起作用

例子：（忽略我难看的样式）
输入框组件

<template>
    <div :class="{'noinp' : !isShow}">
      <input type="text" v-model="name" class="inp" />
    </div>
</template>

<script>
export default {
  components: {},
  props: [ 'isShow' ],
  name: "inputTest",
  data() {
    return {
      name: ""
    };
  },
  //方法集合
  methods: {
    focusFun() {
      var inp = document.getElementsByClassName("inp")[0];
      inp.focus();
    }
  }
};
</script>
<style  scoped>
section {
  width: 100%;
  height: 100%;
}
.inp {
  display: block;
  box-sizing: border-box;
  margin: 100px auto;
  width: 80%;
  height: 44px;
  font-size: 20px;
  border: none;
  padding: 10px;
  line-height: 24px;
  outline: none;
  background-color: #f0f0f0;
}
.noinp {
  position: absolute;
  top: -100px;
  width: 0px;
  height: 0px;
  left: -100px;
  z-index: -1;
  overflow: hidden;
}
</style>

a页面

<template>
  <section>
    <input-test ref="inp" :is-show="isShow"></input-test>
    <div class="btn" @click="goNext">去输入页</div>
  </section>
</template>

<script>
import inputTest from '../base/input-test'
export default {
  data() {
    return {
      isShow: false
    };
  },
  components: {
    inputTest
  },
  //方法集合
  methods: {
    goNext() {
     console.log('------------');
      this.$refs.inp.focusFun();
     this.$router.push('./testKeyb')
    }
  }
};
</script>
<style  scoped>
.btn{
  width: 100px;
  height: 30px;
  background-color: violet;
}
</style>

b页面

<template>
  <section>
    <input-test ref="inp" :is-show="isShow"></input-test>
  </section>
</template>

<script>
import inputTest from '../base/input-test'
export default {
  data() {
    return {
      isShow: true
    };
  },
  components: {
    'input-test': inputTest
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$refs.inp.focusFun();
  },
  //方法集合
  methods: {
  }
};
</script>
<style  scoped>
</style>