基于vue的验证码组件的示例代码


Posted in Javascript onJanuary 22, 2019

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

演示

基于vue的验证码组件的示例代码

分析验证码组件

分析验证码功能

  • 随机出现的数字大小写字母 (基础功能)
  • 不同的数字或者字母有不同的颜色 (功能优化)
  • 不同的数字或者字母有不同的字体大写 (功能优化)
  • 不同的数字或者字母有不同的边距 (功能优化)
  • 不同的数字或者字母有不同的倾斜角度 (功能优化)
  • 更多功能优化...

分析组件功能

  • 可以设置生成验证码的长度 (基本功能)
  • 可以设置验证码组件的宽高 (基本功能)

编写验证码组件

template

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

<template>
 <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
  <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
 </div>
</template>

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}`
  }
 }

完整代码

使用

<valid-code :value.sync="validCode"></valid-code>

组件

<template>
 <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
  <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
 </div>
</template>

<script>
export default {
 name: 'validCode',
 props: {
  width: {
   type: String,
   default: '100px'
  },
  height: {
   type: String,
   default: '40px'
  },
  length: {
   type: Number,
   default: 4
  }
 },
 data () {
  return {
   codeList: []
  }
 },
 mounted () {
  this.createdCode()
 },
 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}`
  }
 }
}
</script>

<style scoped lang="scss">
 .ValidCode{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  span{
   display: inline-block;
  }
 }
</style>

源码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
JS高级运动实例分析
Dec 20 Javascript
详解react-redux插件入门
Apr 19 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
原生JS实现前端本地文件上传
Sep 08 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 #Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 #Javascript
js实现京东秒杀倒计时功能
Jan 21 #Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 #Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 #Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 #Javascript
js中对象和面向对象与Json介绍
Jan 21 #Javascript
You might like
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python3爬虫怎样构建请求header
2018/12/23 Python
总结python中pass的作用
2019/02/27 Python
python实现3D地图可视化
2020/03/25 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js