April 2019

Sort out some of the latest gadgets.

You can see that there are two buttons (get verification code, login) two boxes (enter the phone number, enter the verification code).

So we have the following thing (no concrete function, just look at the structure).

 <template>
<div class= "login-wrapper" >
<div class= "title-bar" > login </div>
<div class= "wrapper phone-wrapper" >
<span >
<span "X" > mobile phone number "" "" "" "" "" "mobile phone number" Class= "title" > verification code </span>
<input class= "input code" type= "number" placeholder= "verification code" >
<div class= ">
<div" > get the verification code.

At this time, you can start writing logic. It is also a simple analysis. Login needs to click, get the verification code need to click and countdown seconds, that is, dynamically modify the text, experience a good check can limit the number of mobile phone number, the number of verification code.

That's almost like this.

 <template>
<div class= "login-wrapper" >
<div class= "title-bar" > login </div>
<div class= "wrapper phone-wrapper" >
<span >
<span "X" > mobile phone number "" "" "" "" "" mobile phone "": "" "" "" "" "" "" V-on:input= "changePhone" >
</div>
<div class= "wrapper code-wrapper" >
<span class= "title" > verification code </span>
<input class= "title" "," "" "" verification code ":" "" "" "" "" "" "" "" "") @click= "loginCode" class= "send" >{{codeText}}</div>
</div>
<div class= "wrapper btn-wrapper" >
<div class= "input input" "," > "login" ",", "("), "," / / input box phone number. Code: '/ / / input box verification code 
codeText:' get verification code ', / / countdown display text 
timingBoard: 60, / countdown 
timer: null, / / a timer, used for countdown verification code}, 
methods: {
loginCode () {}, / / get the verification code 
login () {}, / / login 
changePhone () {}, / / check the cell phone number 
changeCode () {}, / / check the length of the verification code 
}
</script>

With these, it is enough for you to implement a basic mobile phone login interface. If you need full code, please click below. Gist links

Complete code is read: Https://gist.github.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48