How to realize the effect of Segmentation CAPTCHA by vue
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!
