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

This article introduces the relevant knowledge of "how to use vue to achieve the effect of registration page". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, the realization effect map

Second, implementation code

1. Implement the header

Register export default {name: "Top", methods: {goBack () {this.$router.push ("/ Login");},},}; .box1 {width: 100%; height: 0.5remr; margin-bottom: 0.19remr;} span {font-size: 0.18remr; line-height: 0.5remr; font-size: 0.2remr;} .back {font-size: 0.25rem } .box6 {width: 100%; height: 0.66remr; margin: auto;} b {font-size: 0.24remr; font-weight: normal;} p {font-size: 0.13remr; color: gray; margin-top: 0.11remr;}

2. Realize the registration content

+ 86 agree to the agreement and register the following agreement: Taobao platform Service Agreement, Privacy Policy, legal statement, Alipay Service Agreement, Tianyi account Authentication terms of Service import axios from "axios"; import Vue from "vue"; import {Checkbox, Toast} from "vant"; Vue.use (Checkbox); Vue.use (Toast) Export default {name: "Num", data: function () {return {usernum: ", code:", checked: false,};}, methods: {/ / verify mobile phone number checkPhone (phone) {let reg = / ^ 1 [3 | 4 | 5 | 7 | 8] [0-9] {9} $/; return reg.test (phone) }, toSendCode () {if (this.checked) {if (this.checkPhone (this.usernum)) {axios ({url: `/ auth/code/?phone=$ {this.usernum}`,}) .then ((res) = > {console.log (res)) If (res.status = = 200) {localStorage.setItem ("userPhone", this.usernum); Toast ("CAPTCHA sent successfully"); this.$router.push ("/ inputCode");}});} else {Toast ("Please check your mobile phone number") }} else {Toast ("Please check user agreement first");}},},}; .box1 {width: 100%; height: 0.7remt;} .box1b {margin-top: 0.25remr; font-weight: normal;} .phone-container {width: 100%; padding: 0.1rem 0; margin-bottom: 0.4remr; position: relative;}. Phone-container > span {position: absolute Font-size: 0.16; color: # 666; top: 0.21;} input {border: none; outline: none;} input::-webkit-input-placeholder {font-size: 0.2; color: rgb (216,214214);}. Userphone {display: block; width: 100%; height: 0.4; box-sizing: border-box; padding: 0. 3; padding-left: 0.4; font-size: 0.2rem Border-bottom: 0.01rem solid # eee;}. Box2 {width: 100%; height: 0.5 remt; margin-top: 0.2 remt;} .box2h4 {width: 100%; height: 0.4 remt; background-color: yellow; border-radius: 0.15 remr; font-size: 0.18 remt; text-align: center; line-height: 0.3 remr; margin-top: 0.1 remre; font-weight: 600; line-height: 0.4 remt; letter-spacing: 0.02rem Color: rgba (87, 42, 42, 0.623);} .box3 {width: 100%; height: 0.3remr; margin-top: 3.4remr; font-size: 0.12remt;} .box3b {font-weight: normal; color: deepskyblue;} "how to use vue to achieve the effect of the registration page" is here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.