vue怎么實現分割驗證碼效果

本篇內容主要講解“vue怎么實現分割驗證碼效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue怎么實現分割驗證碼效果”吧!

注：該代碼存在問題，因為我maxlength =4 ，input 的寬度跟屏幕同寬，所以當我input 里面的length == 4 的時候，我的光標會超出屏幕，所以我在length == 4 的時候做了一個把光標放到第三個的處理，這種雖用戶體驗不好，也解了length==4的時候整個布局亂了的燃眉之急

上UI 圖

上代碼：

vue

<template>
  <div>
    <v-main class="bgi">
      <v-container class="verify">
        <v-icon @click="verifyShow = false" color="#000">mdi-close</v-icon>
        <div>
          <p class="verifyTitle">輸入驗證碼</p>
          <p class="verifyTitle1" v-show="verifyStatus == 1">
            驗證碼已發送至 <span> {{ "+" + area + phone }}</span>
          </p>
          <p class="verifyTitle2" v-show="verifyStatus == 3">
            驗證碼不正確，請重新輸入
          </p>
          <div class="verifyInputBox">
            <div class="verifyInputBg verifyInputBg1"></div>
            <div class="verifyInputBg verifyInputBg2"></div>
            <div class="verifyInputBg verifyInputBg3"></div>
            <div class="verifyInputBg verifyInputBg4"></div>
            <input
              ref="verifyInput"
              type="text"
              class="verifyInput"
              maxlength="4"
              v-model="verifyInput"
            />
          </div>
          <v-btn
            :disabled="restTimeShow"
            outlined
            tile
            class="nextBtn"
            @click="verifyConfirm"
          >
            確定
          </v-btn>
          <p class="restTime" v-show="restTimeShow">
            重新獲取(<span>{{ restTime }}</span
            >s)
          </p>
        </div>
      </v-container>
    </v-main>
  </div>
</template>

css

<style lang="scss" scoped>
.bgi {
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/imgs/banner.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  p {
    margin-bottom: 0;
  }
  .verify {
    width: 100%;
    height: 100%;
    position: relative;
    color: #000;
    background: #fff;
    .verifyTitle {
      margin-left: 2rem;
      margin-top: 3rem;
      font-size: 1.4rem;
    }
    .verifyTitle1 {
      margin-left: 2rem;
      margin-top: 0.6rem;
      font-size: 0.8125rem;
      span {
        color: #bfbfbf;
      }
    }
    .verifyTitle2 {
      margin-left: 2rem;
      margin-top: 0.6rem;
      font-size: 0.8125rem;
      color: #f53f3f;
    }
    input::-webkit-input-placeholder {
      color: #000;
    }
    .verifyInputBox {
      width: 20rem;
      margin: 3rem auto 0;
      position: relative;
      height: 4rem;
      z-index: 1;
      .verifyInputBg {
        position: absolute;
        z-index: 2;
        height: 4rem;
        width: 4rem;
        border-radius: 0.2rem;
        background: rgba($color: #000, $alpha: 0.1);
      }
      .verifyInputBg2 {
        left: 5.33rem;
      }
      .verifyInputBg3 {
        left: 10.66rem;
      }
      .verifyInputBg4 {
        left: 16rem;
      }
      .verifyInput {
        height: 4rem;
        line-height: 4rem;
        width: 100%;
        letter-spacing: 4.53rem;
        padding-left: 1.5rem;
        font-size: 1.4rem;
        font-weight: 700;
        position: absolute;
        z-index: 3;
      }
    }
    .restTime {
      margin-top: 1rem;
      color: #bfbfbf;
      font-size: 0.8125rem;
      text-align: center;
    }
  }
  .nextBtn {
    margin-top: 2rem;
    margin-left: 2rem;
    width: calc(100% - 4rem);
    height: 3rem !important;
    background: #ff962b;
    border-radius: 0.3125rem;
    font-size: 1rem;
    color: #ffffff !important;
    border: none;
  }
  .nextBtn:disabled {
    background: #d2d2d2;
    color: #ffffff !important;
  }
}
</style>

script

<script>
export default {
  name: "Login",
  data() {
    return {
      area: "86",
      phone: "",
      verifyInput: "",
      verifyStatus: "1", // 1  -- 驗證碼發送至  ||  2 --正在驗證驗證碼  || 3 -- 驗證碼錯誤
      restTimer: null,
      restTime: 60,
      restTimeShow: false,
    };
  },
  watch: {
    verifyInput(newVal) {
      if (newVal.length == 4) {
        this.$nextTick(() => {
          let verifyInput = this.$refs.verifyInput;
          verifyInput.setSelectionRange(3,3);
        });
        this.verifyConfirm();
      }
    },
  },
  methods: {
    verifyConfirm() {
      this.restTimeShow = true;
      this.verifyStatus = 2;
      this.restTimeFun();
    },
    restTimeFun() {
      if (!this.restTimer) {
        this.restTime = 60;
        this.restTimer = setInterval(() => {
          if (this.restTime > 0) {
            this.restTime--;
          } else {
            this.restTimeShow = false;
            clearInterval(this.restTimer);
            this.restTimer = null;
          }
        }, 1000);
      }
    },
  },
};
</script>

效果圖：

到此，相信大家對“vue怎么實現分割驗證碼效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！