Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to achieve the effect of segmented CAPTCHA in vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue how to achieve the effect of segmented CAPTCHA"!

Note: there is a problem with this code, because I maxlength = 4, the width of input is the same as the width of the screen, so when I input the length==4 in the screen, my cursor will exceed the screen, so I did a processing of putting the cursor to the third when I was in length==4. Although the user experience is not good, it also solves the urgent need of the whole layout in length==4.

Upper UI graph

The above code:

Vue

Mdi-close input CAPTCHA

CAPTCHA has been sent to {{"+" + area + phone}}

The verification code is incorrect. Please enter it again.

Confirm to reacquire ({{restTime}} s)

Css

.bgi {width: 100vW; height: 100vh; background: url ("~ @ / assets/imgs/banner.png"); background-size: 100%; background-repeat: no-repeat; p {margin-bottom: 0;}. Width: 100%; height: 100%; position: relative; color: # 000; background: # fff; .verifyTitle {margin-left: 2remt; 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.6remt; font-size: 0.8125remr; 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.66remr;} .verifyInputBg4 {left: 16remt;} .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.8125remr; text-align: center;}} .nextBtn {margin-top: 2remt; margin-left: 2rem Width: calc; height: 3rem! important; background: # ff962b; border-radius: 0.3125remr; font-size: 1rem; color: # ffffff! important; border: none;} .nextBtn: disabled {background: # d2d2d2; color: # ffffff! important;}

Script

Export default {name: "Login", data () {return {area: "86", phone: ", verifyInput:", verifyStatus: "1", / / 1-- CAPTCHA sent to | | 2-validating CAPTCHA | | 3-CAPTCHA error restTimer: null, restTime: 60, restTimeShow: false,} }, watch: {verifyInput (newVal) {if (newVal.length = = 4) {this.$nextTick () = > {let verifyInput = this.$refs.verifyInput; verifyInput.setSelectionRange (3 this.restTimeShow 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);},}

Effect picture:

At this point, I believe you have a deeper understanding of "how to achieve the effect of segmented CAPTCHA in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.