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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 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实现文件下载更能介绍
2012/11/23 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
javascript实现日历效果
2019/06/17 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python返回昨天日期的方法
2015/05/13 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
卫生巾广告词
2014/03/18 职场文书
签约仪式主持词
2014/03/19 职场文书
公证书样本
2014/04/10 职场文书
学校食堂标语
2014/10/06 职场文书
单位租房协议范本
2014/12/03 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
鸦片战争观后感
2015/06/09 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers