vue 实现数字验证码功能

需求：写了一个 手机发送验证码后 输入固定验证码的功能

 

 封装成一个组件,如下:

<template>
  <div class="conts">
    <div class="box">
      <div class="code_list">
        <div :class="[ 'code_item', hideIndex == 0 ? 'code_item-focus' : '', value[0] ? 'shows_shaw' : '', ]">
          {{ value[0] }}
        div>
        <div :class="[ 'code_item', hideIndex == 1 ? 'code_item-focus' : '', value[1] ? 'shows_shaw' : '', ]">
          {{ value[1] }}
        div>
        <div :class="[ 'code_item', hideIndex == 2 ? 'code_item-focus' : '', value[2] ? 'shows_shaw' : '', ]">
          {{ value[2] }}
        div>
        <div :class="[ 'code_item', hideIndex == 3 ? 'code_item-focus' : '', value[3] ? 'shows_shaw' : '', ]">
          {{ value[3] }}
        div>
      div>
      <input v-model="value" class="field-input" type="number" maxlength="4" @input="input()" @focus="focus()" @blur="blur()" />
    div>
  div>
template>
 
<script>
export default {
  data() {
    return {
      value: '',
      index: 0,
      hideIndex: null,
      show_box: false,
    }
  },
  methods: {
    input() {
      const v = this.value.replace(/[^\d]/g, '');
      this.value = v;
      this.index = v.length;
      this.hideIndex = v.length;
      this.$emit('getPassword', v);
    },
    // 获取焦点
    focus() {
      this.hideIndex = this.index;
      this.show_box = true;
    },
    // 失去焦点
    blur() {
      this.hideIndex = null;
      this.show_box = false;
    },
  },
}
script>
 
<style lang="less">
.conts {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  .box {
    position: relative;
    width: 85%;
    overflow: hidden;
    .code_list {
      display: flex;
      justify-content: space-between;
      border: 1px solid transparent;
      padding: 5px;
      border-radius: 3px;
    }
  }
  .field-input {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 59px;
    padding: 0;
    border: none;
    outline: none;
    opacity: 0;
    background: transparent;
  }
}
.shows_shaw {
  border: 1px solid #0187fb !important;
}
.code_item {
  box-sizing: border-box;
  width: 59px;
  height: 59px;
  line-height: 59px;
  font-size: 24px;
  text-align: center;
  font-weight: 400;
  background-color: #f2f5f4;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-right: 7px;
  &:last-child {
    margin-right: 0;
  }
}
.code_item-focus {
  border-color: #0187fb;
  &::before {
    content: "";
    display: block;
    width: 2px;
    height: 24px;
    margin: 17px auto;
    background: #0187fb;
    animation: blink 1s steps(1) infinite;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
style>

引用

"getPassword">
 
/引入
import roomPassword from '@/components/roomPassword'
 
 
//方法
 getPassword(val) {
    console.log('val', val);
 },