移动端 vue验证码输入框

vue中一个简单的验证码输入框

演示地址 建议手机打开 思路就是一个input输入框定位在最上面，把opacity设置为0，这样就变得透明。六个li来显示内容 代码

<!--  -->
<template>
  <div class="password-wrapper">
    <input type="tel" class="input-box" maxlength="6" @keyup="inputNumber">
    <ul class="show-ul">
      <li class="show-li" v-for="(i,index) in 6" :key="index">{{numList[index]}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  created () {},
  mounted: function () {},
  components: {},
  data () {
    return {
      numList: []
    }
  },
  methods: {
    inputNumber (res) {
      console.log(res)
      if (this.numList.length < 6 && res.key !== 'Backspace') {
        this.numList.push(res.key)
      }
      if (res.key === 'Backspace') {
        this.numList.pop()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.password-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .input-box{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    opacity: 0;
    // width: 100%;
    // visibility: hidden;
  }
  .show-ul{
    flex: 1;
    display: flex;
    height: 50px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    .show-li{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ccc;
      &:last-child{
        border-right: none
      }
    }
  }
}
</style>

复制代码

转载于:https://juejin.im/post/5d0901bcf265da1bb27733a1