Vue登陆注册-掘金可爱萌猫

时间 2019-11-06

标签 vue 登陆注册可爱繁體版

原文原文链接

阅读时间预计5分钟,干货满满,记得点赞加收藏哦😄前端

1、写在前面

各位掘友久等了,最近在写Vue全家桶+Vant从零开发搭建电商App实战项目,项目基本完结,后面会不按期分享出来,期待各位掘友的关注。git

2、注册登陆

注册登陆,几乎是全部电商App必备模块,正好今天想把这块知识拆出来,详尽的写下来了,用过掘金的小伙伴都知道,掘金PC端的登陆界面很是的萌,当你输入帐号的时候萌猫会很开心,输入密码的时候,萌猫会捂眼睛,看到这个可爱的设计,着实让我喜欢,因此我就借鉴了掘金的萌猫图写了个登陆注册模块,如下是完整UI.github

3、总体UI搭建思路

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

4、Vant 使用

Vant是有赞开源的很适合作电商App的UI组件,用起来很是爽,我整个项目都采用Vant UI搭建,风格统一,使用简单方便. 首先将Vant引入到项目中,建议建立一个单独的文件来管理Vant的组件引入模块,按需加载,原则是用哪一个就加载哪一个.算法

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

Vant tab按照文档来,很是的简单和好用。bash

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

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

5、萌猫切换

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

// 改变萌猫
    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')
      }
    },
复制代码

6、倒计时

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

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

      });
      this.countDown = 60;
      this.timeIntervalID = setInterval(() => {
        this.countDown--;
        // 若是减到0 则清除定时器
        if (this.countDown == 0) {
          clearInterval(this.timeIntervalID);
        }
      }, 1000)
    }
复制代码

7、手机号码正则验证

经过计算属性来验证输入的手机号码是否正确,而后在合适的位置调用这个计算属性就能够

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

8、验证码模块

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

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

9、总结

注册登陆仅仅是整个项目的一部分,先分享出来,后面会将整个完整的电商项目分享出来,但愿你们能点赞加关注,你的点赞能让更多的人一块儿学习,一块儿进步😄

10、完整电商项目

首页模块

分类模块

吃什么模块

购物车模块

我的中心模块

往期分享连接

最后感谢您的关注!

个人GitHub,但愿能获得你的小星星~

但愿个人分享对你能有帮助,有不正确的地方也但愿获得您的勘误!本人将不胜感激,另外若是你想获取前端整期学习视频和资料扫一扫下面的二维码,回复学习便可,也但愿在前端进阶的路上,咱们一块儿成长,一块儿进步!