利用vue實現(xiàn)密碼輸入框/驗證碼輸入框

更新時間：2023年08月30日 15:11:19 作者：前端61

這篇文章主要為大家詳細介紹了如何利用vue實現(xiàn)密碼輸入框或驗證碼輸入框的效果,文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下

1.效果預覽

2.實現(xiàn)思路

制作6個小的正方形div

用一個input覆蓋在6個div上

給input設置透明（隱藏掉input）

3.源碼

html

<div class="input-box flexbox">
	<div class="code-item" :class="codeValue.length == 0 && inputFocus ? 'code-item-active' : ''">{{codeValue[0]}}</div>
	<div class="code-item" :class="codeValue.length == 1 && inputFocus ? 'code-item-active' : ''">{{codeValue[1]}}</div>
	<div class="code-item" :class="codeValue.length == 2 && inputFocus ? 'code-item-active' : ''">{{codeValue[2]}}</div>
    <div class="code-item" :class="codeValue.length == 3 && inputFocus ? 'code-item-active' : ''">{{codeValue[3]}}</div>
    <div class="code-item" :class="codeValue.length == 4 && inputFocus ? 'code-item-active' : ''">{{codeValue[4]}}</div>
    <div class="code-item" :class="codeValue.length >= 5 && inputFocus ? 'code-item-active' : ''">{{codeValue[5]}}</div>
    <el-input class="input-code"
      :value="codeValue"
      :maxlength="6"
      @blur="codeInputBlur"
      @focus="codeInputFocus"
      @input="codeInputChange">
    </el-input>
  </div>

css

  .input-box {
    margin-top: 20px;
    position: relative;
  }
  .input-code {
    position: absolute;
  }
  .code-item {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #f0f0f0;
    margin-right: 10px;
  }
  .code-item-active {
    border: 1px solid #F23026;
    box-sizing: border-box;
  }
  // 隱藏input
  .input-box {
    .el-input__inner {
      width: 362px;
      height: 50px;
      background-color: transparent;
      border: none;
      color: transparent;
    }
  }

js

data() {
    return {
      codeValue: '',
      inputFocus: false,
      sendCodeFlag: false,
      codeTime: 59,
    };
  },
  methods: {
    // 發(fā)送驗證碼
    sendCode() {
      this.codeTime = 59;
      this.sendCodeFlag = true;
      const timer = setInterval(() => {
        this.codeTime -= 1;
        if (this.codeTime <= 0) {
          this.sendCodeFlag = false;
          clearInterval(timer);
        }
      }, 1000);
    },
    // 驗證碼輸入框
    codeInputChange(e) {
      if (e) {
      // 判斷輸入內(nèi)容是否為數(shù)字
        if ((/^\+?[0-9][0-9]*$/).test(e)) {
          this.codeValue = e;
        }
      } else {
        this.codeValue = '';
      }
    },
    // 驗證碼輸入框失去焦點
    codeInputBlur() {
      this.inputFocus = false;
    },
    // 驗證碼輸入框獲取到焦點
    codeInputFocus() {
      this.inputFocus = true;
    },
  },

到此這篇關于利用vue實現(xiàn)密碼輸入框/驗證碼輸入框的文章就介紹到這了,更多相關vue輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: