基于vue的验证码组件

dingding199389 发布于2019-08-30 15:55 / 1702人阅读

摘要：最近在自己写页面，模仿思否论坛，然后写登录注册的时候需要一个验证码组件去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。

最近在自己写页面，模仿思否论坛，然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。

演示

分析验证码组件

分析验证码功能

随机出现的数字大小写字母（基础功能）

不同的数字或者字母有不同的颜色 (功能优化)

不同的数字或者字母有不同的字体大写 (功能优化)

不同的数字或者字母有不同的边距 (功能优化)

不同的数字或者字母有不同的倾斜角度 (功能优化)

更多功能优化...

分析组件功能

可以设置生成验证码的长度 (基本功能)

可以设置验证码组件的宽高 (基本功能)

编写验证码组件

template

最外层div绑定点击事件，点击后刷新验证码。
span是单个验证码的载体，样式动态绑定

methods

refreshCode 刷新验证码的方法
createdCode 生成验证码的方法
getStyle 为每个元素生成动态的样式

  methods: {
    refreshCode () {
      this.createdCode()
    },
    createdCode () {
      let len = this.length,
        codeList = [],
        chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
        charsLen = chars.length
      // 生成
      for (let i = 0; i < len; i++) {
        let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)), // 随机码
          color: `rgb(${rgb})`, // 随机颜色
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`, // 随机字号
          padding: `${[Math.floor(Math.random() * 10)]}px`, // 随机内边距
          transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)` // 随机旋转角度
        })
      }
      // 指向
      this.codeList = codeList
      // 将当前数据派发出去
      this.$emit("update:value", codeList.map(item => item.code).join(""))
    },
    // 动态绑定样式
    getStyle (data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
    }
  }

完整代码

使用

组件

源码地址
演示地址模仿思否写的网站，点注册可看到验证码

服务器托管专线服务 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117272.html

基于vue的验证码组件

摘要：最近在自己写页面，模仿思否论坛，然后写登录注册的时候需要一个验证码组件去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。最近在自己写页面，模仿思否论坛，然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。演示 showImg(https://segmentfault.com/img/bVbnyrp?w=...

pekonchan 2019-08-23 14:52 评论0 收藏0
基于vue的验证码组件

摘要：最近在自己写页面，模仿思否论坛，然后写登录注册的时候需要一个验证码组件去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。最近在自己写页面，模仿思否论坛，然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的，而且大多都是基于后端的，于是自己手写一个。演示 showImg(https://segmentfault.com/img/bVbnyrp?w=...

刘东 2019-08-02 14:09 评论0 收藏0
mica 中验证码扩展 mica-captcha 验证码组件

摘要：生成验证码图形验证码校验验证码生成验证码图形验证码校验验证码生成其他类型验证码生成图片验证码主要为或者前后端分离设计。校验图片验证码。验证码效果 showImg(https://segmentfault.com/img/remote/1460000018639417?w=108&h=40);showImg(https://segmentfault.com/img/remote/146...

Vixb 2019-08-16 16:06 评论0 收藏0
Vue2.0 仿滴滴出行项目

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。效果预览 showImg(h...

ShevaKuilin 2019-08-21 11:44 评论0 收藏0
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

摘要：简介最近写了一个基于权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。简介最近写了一个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。源码地址...

_ivan 2019-08-23 14:06 评论0 收藏0