基于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 相关文章推荐
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
javascript 实现 原路返回
Jan 21 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 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
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
一个网马的tips实现分析
2010/11/28 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python 备份程序代码实现
2017/03/06 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
护理专业自荐信范文
2014/02/26 职场文书
大学军训感言400字
2014/03/11 职场文书
分公司经理任命书
2014/06/05 职场文书
买卖合同协议书范本
2014/10/18 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python