Question

在Safari Mobile上安装Vue组件后，我无法将重点放在输入上。在另一个基于jQuery的项目中，我通过在touchstart处理程序上触发click解决了该错误。但是在Vue中，此技巧无效。

我知道在移动浏览器中，我无法在真正的用户交互事件处理程序功能之外触发焦点事件。我该如何解决这个问题？

Vue.component('btn', {
  template: '<button  @click="handleClick"  type="button">click me baby</button>',
  methods: {
    handleClick: function() {
      setTimeout(() => {

        var i = setInterval(() => {
            var el = document.querySelector('.tarea')
          if(el) {
            el.focus();
            clearInterval(i);
          }
        }, 400);

         this.$emit('bebe');

      }, 1000)
    }
  }

});
Vue.component( 'my-input', {
    data() { return {value: 'lorem ipsum'}},
    template: '<div><textarea class="tarea" v-model="value" ></textarea></div>'
});

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    isVisible: false,
  },
  methods: {
    onBebe: function() {

      this.isVisible = true;
    }
  }
})

您可以在此处测试解决方案： https://jsfiddle.net/eLw7roup/17/

我使用appetize.io演示版进行测试

将组件安装在移动Safari上之后，专注于输入的解决方法

0 个答案: