本篇内容主要讲解“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怎么实现分割验证码效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
