基于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日期转换 时间戳转日期格式
Nov 05 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 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正则表达匹配中文问题分析小结
2012/03/25 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Python 中 list 的各项操作技巧
2017/04/13 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
详解python算法之冒泡排序
2019/03/05 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
大课间活动制度
2014/01/18 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技