最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

Vue全家桶+Vant组件实现注册登录功能

Vue全家桶+Vant组件实现注册登录功能
注册登录对于PC端项目和App几乎是必备模块,而我最近也完成一个外包项目,就是使用Vue全家桶+Vant组件从零开发搭建电商App实战项目,项目呢几乎完结,正好不怎么忙了所以有必要把这块用到的知识拆分出来,详尽的写下来了,一是为了记录下自己在做项目用的知识总结,二是为其他刚入手还找不着入门的或者是不知道如何下手的小伙伴起到一个启发作用。

用过掘金的小伙伴都知道,掘金PC端的登录界面非常的萌,当你输入账号的时候萌猫会很开心,输入密码的时候,萌猫会捂眼睛,看到这个可爱的设计,不知道萌到你了没,反正着实让我喜欢,所以我就借鉴了掘金的萌猫图写了个登录注册模块,以下是完整UI。
Vue全家桶+Vant组件实现注册登录功能

Vue全家桶+Vant组件实现注册登录功能

整体UI搭建思路

UI部分非常的简单,整体就是最外层一个大盒子放一张图片,里面放一张小盒子设备边框圆角,然后把萌猫定位到小盒子的顶部中间位置,然后借助Vant来完成相关输入框,按钮的搭建.

Vant 使用

Vant是有赞开源的很适合做电商App的UI组件,用起来非常爽,我整个项目都采用Vant UI搭建,风格统一,使用简单方便.

首先将Vant引入到项目中,建议创建一个单独的文件来管理Vant的组件引入模块,按需加载,原则是用哪个就加载哪个.

注册登录的切换用到了Vant的标签页组件,快速的实现登录和注册页面的切换。

Vant tab按照文档来,非常的简单和好用。

输入框用到了Vant的Field组件Vant Field

按钮用到了Vant的Button组件Vant Button

萌猫图切换

萌猫根据你所在的输入框不同切换不同的样式,其实就是三张图片的切换,要么一次把三张图片都加载到页面,然后通过v-show的方式来控制他们的显示,这种方式感觉有点麻烦,我采用数据驱动界面的方式,点击到哪个位置,就让img标签来加载哪张图片.

// 改变萌猫
changeImage(index) {
  if (index == 0) {
    this.imageURL = require('./../../images/login/greeting.png')
  } else if (index == 1) {
    this.imageURL = require('./../../images/login/blindfold.png')
  } else {
    this.imageURL = require('./../../images/login/normal.png')
  }
},

倒计时

倒计时其实就是个定时器,先设置好总时长,然后每秒减一,直到减到0,然后恢复按钮点击的状态.

// 发送手机验证码
sendVerifyCode() {
  Toast({
    message: '发送验证码',
    duration: 800

  });
  this.countDown = 60;
  this.timeIntervalID = setInterval(() = >{
    this.countDown--;
    // 如果减到0 则清除定时器
    if (this.countDown == 0) {
      clearInterval(this.timeIntervalID);
    }
  },
  1000)
}

手机号码正则验证

通过计算属性来验证输入的手机号码是否正确,然后在合适的位置调用这个计算属性就可以

computed: {
  // 手机号码正确验证
  phoneNumVerify() {
    return /[1][3,4,5,6,7,8][0-9]{9}$/.test(this.tel_registered);
  }
},

验证码模块

验证码其实就是img标签请求接口获取图片,当点击图片的时候再次请求获取最新的图片.

// 切换验证码
getCaptcha() {
  // 获取验证码的标签
  let captchaEle = this.$refs.captcha;
  this.$set(captchaEle, 'src', 'http://192.168.0.1/web/xlmc/api/captcha?time=' + new Date());
},

结束语

以上就是码云笔记为大家带来的Vue全家桶+Vant组件实现注册登录功能,其实也很简单,后面我还会将整个完整的电商项目分享出来,希望大家能点赞加关注,你的点赞能让更多的人一起学习,一起进步😄

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » Vue全家桶+Vant组件实现注册登录功能

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发