基于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 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
图解js图片轮播效果
Dec 20 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
详解vue引入子组件方法
Feb 12 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
php继承的一个应用
2011/09/06 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
Node.js事件驱动
2015/06/18 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python解析yaml文件过程详解
2019/08/30 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
寒假实习自荐信
2014/01/26 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
厂长岗位职责
2014/02/19 职场文书
软件售后服务承诺书
2014/05/21 职场文书
团结演讲稿范文
2014/05/23 职场文书
幼师求职自荐信
2014/05/31 职场文书
公司年终奖分配方案
2014/06/16 职场文书
物理教育专业求职信
2014/06/25 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2015小学师德工作总结
2015/07/21 职场文书
Mysql开启外网访问
2022/05/15 MySQL