关于javascript:H5仿原生app短信验证码vue20组件附源码地址

一、开发背景

• 产品出设计稿要求做一个仿原生 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>
   </div>
 </div>
</div>

 只需简略的这几行 html 构造，用来渲染题目和输入框和验证码组件
js 代码也很简略 

// 首先定义一些初始默认值，因为默认依照 6 位数验证码来的
let defaultCodeNum = 6
let defaultMoveUnit = 17.2
let defaultInputPL = 7
let defaultSmsCodeItemWidth = 14
export default {
  name: "VueSmsCheckCode",
  directives: {
    focus: {inserted: function (el) {el.focus()
      }
    }
  },
  props: {
    title: {
      type: String,
      default: '请录入验证码'
    },
    codeNum: { // 验证码个数
      type: Number,
      default: 6
    },
    isError: { // 验证码谬误显示谬误提醒
      type: Boolean,
      default: false
    },
    errorColor: {
      type: String,
      default: '#D81A1A'
    }
  },
  data() {
    return {smsCodeList: [], // 验证码输出显示在 div 上的数字
      inputValue: '', // 输入框的值
      smsValue: '', // 验证码结束后归总的变量
      moveUnit: 17.2, // input 位移单位

      inputBoxActive: 0, // 以后输入框位移地位
      currentIndex: 0, // 以后验证码索引
      isShowInputBox: true, // 是否显示输入框
      error: false, // 验证码谬误报红
      errorColorDefault: '#b1b1b1', // 默认谬误输入框色彩
      style: { // 默认款式
        inputPL: 0, // input padding-left 值
        smsCodeItemWidth: 0, // 验证码显示 item 的宽度 (自适应)
      }
    }
  },
  created() {this.reDomRender() // 初始化时，通过传过来的验证码个数从新渲染组件（各个 dom 地位，宽度等从新计算）this.compareList() // push 默认数据
    this.inputPaving() // 当点击手机验证码主动填充时，主动平铺数据},
  methods: {reDomRender() {
      this.style = {inputPL: Math.round(defaultCodeNum / (this.codeNum / defaultInputPL)),
        smsCodeItemWidth:  Math.round(defaultCodeNum / this.codeNum * defaultSmsCodeItemWidth)
      }
      this.moveUnit =  Math.round(defaultCodeNum / (this.codeNum / (defaultMoveUnit - .3333)))
    },
    compareList() {for (let i = 0; i < this.codeNum; i++) {if (this.smsCodeList.length < this.codeNum) {
          this.smsCodeList.push({
            val: '',
            isError: this.isError
          })
        }
      }
    },
    initAll() {this.smsCodeList = []
      this.compareList()
      this.inputValue = ''this.smsValue =''
      this.inputBoxActive = 0
      this.currentIndex = 0
      this.isShowInputBox = true
      // 延时解决光标聚焦
      setTimeout(() => {this.$refs.refInout.focus()
      })
    },
    // 当点击验证码时，inputBoxActive，值要分铺在每个输入框里
    inputPaving() {
      let v = this.inputValue
      if (v.length > 0) {v.split('').forEach((item, index) => {if (index <= v.length) {this.smsCodeList[index].val = item
            const inputPosition = (index + 1) * this.moveUnit
            this.inputBoxActive = inputPosition >= 100 ? 100 : inputPosition
            this.currentIndex = index + 1
            this.smsValue += item
            this.inputValue = ''
            if (index + 1 === this.codeNum) {
              this.isShowInputBox = false
              this.sendFun()}
          }
        })
      }
    },
    onKeyDown(e) {
      let key = e.key;
      e.returnValue = !(key === 'e' || key === 'E' || key === '+' || key === '-');
    },
    onKeyUp(e) {if (this.currentIndex < 1) return
      if (e.code === 'Backspace' || e.key === 'Backspace') { // 会退
        this.currentIndex = this.currentIndex - 1

        this.inputBoxActive = this.inputBoxActive - this.moveUnit

        this.smsCodeList = this.smsCodeList.map((val, index) => {if (index === this.currentIndex) {
            val.val = ''
            val.isError = this.isError
            return val
          }
          return val
        })
      }
    },
    handleClick() {this.$refs.refInout.focus()
    },
    sendFun() {this.$emit('finish', this.smsValue)
    }
  },
  watch: {inputValue(v) { // 监听输入框输出的值
      if (!v) return
      // 初始化时，点击软键盘上的验证码主动填充时候铺 input 数据
      if (v.length > 1) {this.inputPaving()
        return;
      }
      this.inputBoxActive = this.inputBoxActive + this.moveUnit
      this.smsCodeList.map((val, index) => {if (this.currentIndex === index) {if(val) {
              // 以后输出的地位使红色底部条初始化
            val.isError = false
          }
          val.val = v
          return val
        }
        return val
      })
      this.currentIndex += 1
      this.inputValue = ''
      if (this.currentIndex >= this.codeNum) { // 当最初一位时发
        this.isShowInputBox = false
        this.smsCodeList.forEach(val => {this.smsValue += val.val})
        this.sendFun()}
    },
    isError(v) { // 监听验证码是否谬误
      this.error = v
      if (v) {
        this.smsCodeList.map(value => {
          value.isError = true
          return value
        })
        this.initAll()}
    }
  }
}

 剩下的就是 css 了

npm install vue-sms-check-code --save

最新版 1.0.1 (2022/5/25)

包惯例操作下载应用

另外须要残缺的代码请到 github 或 gitee 上下载

开源并总结整顿真的很费时间，如果不错还请 star
🈶️问题请 issues

gitee 源码地址

github 源码地址

源码里有 example 应用形式，应用灰常简略。

欢送点赞评论加转发

本篇文章由蜗牛老湿开发 butterfly 一键公布平台公布