用vue实现注册页效果 vue实现短信验证码登录
更新时间:2021年11月22日 12:20:56 作者:model-01
这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下
一、实现效果图
二、实现代码
1、实现头部
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | < template > < div class = "box" > < div class = "box1" > < span class = "iconfont icon-zuojiantou back" @ click = "goBack" ></ span > </ div > < div class = "box6" > < b >手机号注册</ b > </ div > </ div > </ template > < script > export default { name: "Top", methods: { goBack() { this.$router.push("/Login"); }, }, }; </ script > < style scoped> .box1 { width: 100%; height: 0.5rem; margin-bottom: 0.19rem; } span { font-size: 0.18rem; line-height: 0.5rem; font-size: 0.2rem; } .back { font-size: 0.25rem; } .box6 { width: 100%; height: 0.66rem; margin: auto; } b { font-size: 0.24rem; font-weight: normal; } p { font-size: 0.13rem; color: gray; margin-top: 0.11rem; } </ style > |
2、实现注册内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | < template > < div class = "box" > < div class = "box1" > < div class = "phone-container" > < span >+86</ span > < input class = "userphone" type = "" v-model = "usernum" placeholder = "请输入手机号码" /> </ div > </ div > < div class = "box2" > < h3 @ click = "toSendCode" >同意协议并注册</ h3 > </ div > < div class = "box3" > < van-checkbox v-model = "checked" > 已阅读并同意以下协议:< b >淘宝平台服务协议、隐私权政策、法律声明、支付宝服务协议、天翼账号认证服务条款</ b > </ van-checkbox > </ div > </ div > </ template > < script > 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: { // 验证手机号 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("验证码发送成功"); this.$router.push("/inputCode"); } }); } else { Toast("请检查您的手机号"); } } else { Toast("请先勾选用户协议"); } }, }, }; </ script > < style scoped> .box1 { width: 100%; height: 0.7rem; } .box1 b { margin-top: 0.25rem; font-weight: normal; } .phone-container { width: 100%; padding: 0.1rem 0; margin-bottom: 0.4rem; position: relative; } .phone-container > span { position: absolute; font-size: 0.16rem; color: #666; top: 0.21rem; } input { border: none; outline: none; } input::-webkit-input-placeholder { font-size: 0.2rem; color: rgb(216, 214, 214); } .userphone { display: block; width: 100%; height: 0.4rem; box-sizing: border-box; padding: 0 0.3rem; padding-left: 0.4rem; font-size: 0.2rem; border-bottom: 0.01rem solid #eee; } .box2 { width: 100%; height: 0.5rem; margin-top: 0.2rem; } .box2 h3 { width: 100%; height: 0.4rem; background-color: yellow; border-radius: 0.15rem; font-size: 0.18rem; text-align: center; line-height: 0.3rem; margin-top: 0.1rem; font-weight: 600; line-height: 0.4rem; letter-spacing: 0.02rem; color: rgba(87, 42, 42, 0.623); } .box3 { width: 100%; height: 0.3rem; margin-top: 3.4rem; font-size: 0.12rem; } .box3 b { font-weight: normal; color: deepskyblue; } </ style > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
分析 Vue 中的 computed 和 watch 的区别
这篇文章分析 Vue 的 computed 和 watch 的区别,computed 用来监控自己定义的变量,页面上可直接使用。watch 是监测 Vue 实例上的数据变动,通俗地讲,就是检测 data 内声明的数据,需要的朋友可以参考一下2021-09-09
最新评论