vue 实现数字验证码功能

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

封装成一个组件,如下:

  

    

      

        

          {{ value[0] }}
        
        

          {{ value[1] }}
        
        

          {{ value[2] }}
        
        

          {{ value[3] }}
        
      
      
    
  

 

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;
    },
  },
}

 

.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;
  }
}

引用

/引入
import roomPassword from '@/components/roomPassword'


//方法
 getPassword(val) {
    console.log('val', val);
 },

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: mysql 大表如何ddl 👑

大家好，我是蓝胖子，mysql对大表(千万级数据)的ddl语句，在生产上执行时一定要千万小心，一不小心就有可能造成业务阻塞，数据库io和cpu飙高的情况。今天我们就来看看如何针对大表执行ddl语句。 通过这篇文章，你能了解到下面的知识点, 传统ddl 和onl…