vue3.0实现点击切换验证码(组件)及校验


Posted in Vue.js onNovember 18, 2020

本文实例为大家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码,供大家参考,具体内容如下

先看效果

vue3.0实现点击切换验证码(组件)及校验

父组件

<template>
 <div class="login">
 <van-field
  center
  clearable
  label="验证码"
  placeholder="输入验证码"
  v-model="verify"
 >
  <template #button>
  <vueImgVerify ref="verifyRef" />
  </template>
 </van-field>
 <span style="margin:20px">点击更换验证码</span>
 <van-button round block type="info" native-type="submit" @click="btn">
  提交
 </van-button>
 </div>
</template>

<script>
// ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。
import { reactive, ref, toRefs } from "vue";
import vueImgVerify from "../views/lv.vue"; // 引入的子组件 
import { Toast } from "vant";
export default {
 components: {
 vueImgVerify,
 },
 setup() {
 const verifyRef = ref(null);
 const state = reactive({
  verify: "",
 });
 const btn = function() {
 // console.log(verifyRef.value.imgCode);
 // console.log(state.verify);
  if (verifyRef.value.imgCode === state.verify) {
  Toast.success("验证码输入正确");
  } else {
  Toast.fail("验证码输入错误");
  }
 };

 return {
  ...toRefs(state),
  btn,
  verifyRef,
 };
 },
};
</script>

<style lang="less"></style>

reactive, ref, toRefs 可以去官网查看各 代表的含义 官网

子组件 封装组件,即用即粘贴

<template>
 <div class="img-verify">
 <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas>
 </div>
</template>

<script type="text/ecmascript-6">
import { reactive, onMounted, ref, toRefs } from 'vue'
export default {
 setup() {
 const verify = ref(null)
 const state = reactive({
  pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 字符串
  width: 120,
  height: 40,
  imgCode: ''
 })
 onMounted(() => {
  // 初始化绘制图片验证码
  state.imgCode = draw()
 })
 
 // 点击图片重新绘制
 const handleDraw = () => {
  state.imgCode = draw()
 }

 // 随机数
 const randomNum = (min, max) => {
  return parseInt(Math.random() * (max - min) + min)
 }
 // 随机颜色
 const randomColor = (min, max) => {
  const r = randomNum(min, max)
  const g = randomNum(min, max)
  const b = randomNum(min, max)
  return `rgb(${r},${g},${b})`
 }

 // 绘制图片
 const draw = () => {
  // 3.填充背景颜色,背景颜色要浅一点
  const ctx = verify.value.getContext('2d')
  // 填充颜色
  ctx.fillStyle = randomColor(180, 230)
  // 填充的位置
  ctx.fillRect(0, 0, state.width, state.height)
  // 定义paramText
  let imgCode = ''
  // 4.随机产生字符串,并且随机旋转
  for (let i = 0; i < 4; i++) {
  // 随机的四个字
  const text = state.pool[randomNum(0, state.pool.length)]
  imgCode += text
  // 随机的字体大小
  const fontSize = randomNum(18, 40)
  // 字体随机的旋转角度
  const deg = randomNum(-30, 30)
  /*
   * 绘制文字并让四个文字在不同的位置显示的思路 :
   * 1、定义字体
   * 2、定义对齐方式
   * 3、填充不同的颜色
   * 4、保存当前的状态(以防止以上的状态受影响)
   * 5、平移translate()
   * 6、旋转 rotate()
   * 7、填充文字
   * 8、restore出栈
   * */
  ctx.font = fontSize + 'px Simhei'
  ctx.textBaseline = 'top'
  ctx.fillStyle = randomColor(80, 150)
  /*
   * save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。
   * 这就允许您临时地改变图像状态,
   * 然后,通过调用 restore() 来恢复以前的值。
   * save是入栈,restore是出栈。
   * 用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
   *
   * */
  ctx.save()
  ctx.translate(30 * i + 15, 15)
  ctx.rotate((deg * Math.PI) / 180)
  // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
  // 请使用 font 属性来定义字体和字号,并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
  // context.fillText(text,x,y,maxWidth);
  ctx.fillText(text, -15 + 5, -15)
  ctx.restore()
  }
  // 5.随机产生5条干扰线,干扰线的颜色要浅一点
  for (let i = 0; i < 5; i++) {
  ctx.beginPath()
  ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height))
  ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
  ctx.strokeStyle = randomColor(180, 230)
  ctx.closePath()
  ctx.stroke()
  }
  // 6.随机产生40个干扰的小点
  for (let i = 0; i < 40; i++) {
  ctx.beginPath()
  ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
  ctx.closePath()
  ctx.fillStyle = randomColor(150, 200)
  ctx.fill()
  }
  return imgCode
 }

 return {
  ...toRefs(state),
  verify,
  handleDraw
 }
 }
}
</script>
<style type="text/css">
.img-verify canvas {
 cursor: pointer;
}
</style>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

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

Vue.js 相关文章推荐
vue 插槽简介及使用示例
Nov 19 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
You might like
php 三维饼图的实现代码
2008/09/28 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP 采集心得技巧
2009/05/15 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
js一组验证函数
2008/12/20 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
解读Django框架中的低层次缓存API
2015/07/24 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
浅谈python常用程序算法
2019/03/22 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
Python如何获取文件路径/目录
2020/09/22 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL