移动端使用类似 picker组件时，input聚焦不触发键盘的操作

场景

• 移动端使用picker组件，示例中用的时 mint-ui 的picker ,但本文的操作与mint-ui的picker 没有太多关系

示例代码

说明： 这是一个简单的选择日期的框，要实现的功能时 可以选择出生日期，我们看效果图

实际上在手机端的话 ，底部还会弹出键盘的。这里就不妨手机的图了

解决方法尝试1 （网上找的解决方案）

stopKeyborad () {
  this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
  setTimeout(() => {
    this.$refs.scanTextbox.removeAttribute('readonly');
  }, 200);
}

改进

其实不用vue 的refs 也可以 ，直接 @focus=“stopKeyborad” 然后 this.$refs.scanTextbox 替换成 e.srcElement

 stopKeyboard(e){
        e.srcElement.setAttribute('readonly', 'readonly')
        setTimeout(() => {
          e.srcElement.removeAttribute('readonly')
        }, 200)
      },

继续改进

因为 原来的@focus 已经写好了 业务方法，并且有多个picker , 这样 就不能在@focus上面该了 所以加了一个 @click
代码为

这样在pc端调试好了，突然发现手机端会弹出键盘，只需要加个@click 就好了