码云笔记前端博客
Home > JavaScript > Vue全家桶+Vant组件实现注册登录功能

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

2019-10-25 分类:JavaScript 作者:管理员 阅读(175)

本文共计1759个字,阅读时间预计5分钟,干货满满,记得点赞加收藏哦

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标签来加载哪张图片.

1
2
3
4
5
6
7
8
9
10
// 改变萌猫
    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,然后恢复按钮点击的状态.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 // 发送手机验证码
    sendVerifyCode () {
      Toast({
        message: '发送验证码',
        duration: 800

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

手机号码正则验证

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

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

验证码模块

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

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

结束语

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(12) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
12

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Vue全家桶+Vant组件实现注册登录功能

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8648021 次
  • 最近更新: 2019年11月21日