移动端vant框架van-password-input组件在pc端无法点击

摘要

vant本身是个移动端框架，没有做pc端兼容处理，在pc端使用（van-password-input）密码输入框组件，会导致无法点击的情况发生，如果按f12，开启手机端调试模式是正常的，因为浏览器本身有模拟手机端的调试，我遇到的情况就是，原先项目使用了vant框架做h5页面，然后需要在pc端运行，修改了pc端显示的h5尺寸宽度为414px，效果也就是一个小手机的样式显示在页面并居中。

 

遇到问题

那么问题来了，如果在pc端不开启f12手机模拟调试，导致van-password-input组件无法使用，我在node_modules查找vant打包源代码，发现这个组件用的是touchstart事件来触发，在pc端并不兼容此方法。

 

尝试操作方案（失败）：

我尝试外部通过ref触发内部的touchstart方法，方法触发了，然后配合van-password-input（密码输入框）一起使用的van-number-keyboard（数字键盘）弹起来了，但是并无法使用，出现van-password-input无光标、van-number-keyboard无法点击数字，果断放弃修改这两个组件，我原本是打算如果修改成功把这两个组件搬出来用；

 

最终解决方案（重写验证码输入框，选用系统自带输入框）：

实现思路概述：写一个input输入框，然后再用样式写一个4位数的密码输入框盖住input输入框，效果看下图

 

实现代码如下：

html代码

            

              

                {{codeArr[0]}}
                
              
              

                {{codeArr[1]}}
                
              
              

                {{codeArr[2]}}
                
              
              

                {{codeArr[3]}}
                
              
            
            
          

 

scss样式代码

@keyframes shan {
  to{
    opacity: 0;
  }from{
    opacity: 1;
  }
}

.verify-code-div{
  width:70%;
  margin:auto;
  margin-bottom:20px;
  position: relative;
  .verify-code-input{
    width:100%;
    height: 50px;
    // border:1px solid #ccc;
    outline: none;
    color:transparent;
    caret-color:transparent;
    
  }
  .verify-code-num-list{
    width:100%;
    height: 50px;
    background:#fff;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    text-align: center;
    &:after{
      content:"";
      display: block;
      clear:both;
    }
    li{
      float:left;
      width:57px;
      height:57px;
      text-align: center;
      line-height:57px;
      display: inline-block;
      background:rgba(0,0,0,.05);
      border-radius:10px;
      margin-right:11px;
      font-size:20px;
      overflow: hidden;
      .caret{
        margin-top:15px;
        display:inline-block;
        min-width:2px;
        max-width:2px;
        width:2px;
        height:30px;
        background:rgba(0,0,0,.4);
        animation: shan 0.8s infinite;
      }
      &:last-child{
        margin-right:0px;
      }
    }
  }
}

 

javascript代码

export default {
  name: 'verificatonCode',
  data () {
    return {
      code:'',
      codeArr:[],
      isFocus:false
    }
  },
  watch:{
    code(newVal){
      this.codeArr = String(newVal).split("")
    }
  },
  methods: {
    focus(){
      this.isFocus = true
    },
    blur(){
      this.isFocus = false
    },
    codeInputFun(){
      this.$refs.codeInput.focus()
    },
  }
}