快捷導(dǎo)航

vue實現(xiàn)分割驗證碼效果

更新時間：2022年03月21日 17:22:59 作者：瘋和尚——前端收藏工程師

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分割驗證碼效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)分割驗證碼效果的具體代碼，供大家參考，具體內(nèi)容如下

注：該代碼存在問題，因為我maxlength =4 ，input 的寬度跟屏幕同寬，所以當(dāng)我input 里面的length == 4 的時候，我的光標(biāo)會超出屏幕，所以我在length == 4 的時候做了一個把光標(biāo)放到第三個的處理，這種雖用戶體驗不好，也解了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">
? ? ? ? ? ? 驗證碼已發(fā)送至 <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 ?-- 驗證碼發(fā)送至 ?|| ?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>

效果圖：