H5仿原生app短信验证码vue2.0组件附源码地址

一、开发背景

• 产品出设计稿要求做一个仿原生app短信验证码组件，花了两小时搞出来一个还可以的组件，支持屏幕自适应，可以用于弹出框，或自己封装的vue组件里，希望可以帮助那些被产品压榨的同学，哈哈。😄

• 其核心思想就是利用一个输入框使用css3,translate属性，每输入一次后向右位移一个单位位置，直到输入完验证码个数消失。然后定义一个数组smsCodeList，初始化时push对象

smsCodeList = [{
    val: '',
    isError: ''
}]

二、费发不多说，先看演示

演示

三、代码解释

// html代码
<div class='sms-check-code-wrapper' @click='handleClick'>
 <div class="sms-code-container">
   <div :class="['sms-code-title', {'error': error}]"
        :style="{'color': error ? errorColor : errorColorDefault}">
   {
   {
    title }}</div>
   <div class='sms-code-box'>
     <div class="sms-code-input-box" :style="{'transform': `translate(${inputBoxActive}%)`}">
       <input
           ref='refInout'
           v-show='isShowInputBox'
           type='number'
           v-model='inputValue'
           class='sms-code-input'
           :style="{
   
              'width': style.smsCodeItemWidth + '%',
              'paddingLeft': style.inputPL + '%'
            }"
           @keyup="onKeyUp"
           @keydown='onKeyDown'
           v-focus
           :maxlength='codeNum'
           autocomplete="one-time-code"
           inputmode="numeric"
           value=''
       />
     </div>
     <div class='sms-code-bottom flex-sb'>
       <div class='sms-code-item'
            :style="{
   
              'width': style.smsCodeItemWidth + '%'
            }"
            v-for='(item, index) in smsCodeList' :key='index'>
         <span :class="['sms-value', {'error': item.isError }]"
               :style="{'color': item.isError ? errorColor : errorColorDefault}">
         {
   {
    item.val }}</span>
         <span :class="['sms-line', {'error': item.isError}]"
               :style="{'backgroundColor': item.isError ? errorColor : errorColorDefault}">
         </span>
       </div>
     </div>