uniapp 弹框外input框显示问题

99 阅读1分钟

在uniapp中,登录页面有一个手机验证码的输入框,点击获取验证码,弹出弹窗输入图形验证码 在这边会出现一个问题,如果点击获取验证码按钮之前手机验证码的输入框是聚焦的,在显示图形验证码弹框时可能会显示其弹框底下的手机验证码输入框 而且还是聚焦的状态。

解决方案: 给一个disable的状态,在给一个定时器500ms后置为false

<input
    v-model="form.code"
    type="number"
    maxlength="6"
    placeholder="请输入验证码"
    class="form-item__input		  
    :disabled="showOuterCode"
  />
  <view class="spn" @click="getCode" 
    >获取验证码</view
  >
  
  function getCode(){
     xxxxx //打开图形验证码及其他逻辑操作
    showOuterCode.value = true
    setTimeout(()=>{
        showOuterCode.value = false
    },500)
  }