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

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

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

整体 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 组件实现注册登录功能，其实也很简单，后面我还会将整个完整的电商项目分享出来,希望大家能点赞加关注,你的点赞能让更多的人一起学习,一起进步😄

以上关于Vue全家桶+Vant组件实现注册登录功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。