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实现购物车全选和反选功能
Nov 17 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
关于vue-router-link选择样式设置
Apr 30 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+croppic.js实现剪切上传图片功能
2018/08/14 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
微信小程序 生命周期详解
2016/10/12 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
python开发之函数定义实例分析
2015/11/12 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python set常用操作函数集锦
2017/11/15 Python
Python快速排序算法实例分析
2017/11/29 Python
scrapy爬虫实例分享
2017/12/28 Python
使用Python更换外网IP的方法
2018/07/09 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python 监控logcat关键字功能
2020/09/04 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
中间件分为哪几类
2016/09/18 面试题
大学专科生推荐信范文
2013/11/23 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
倡导文明标语
2014/06/16 职场文书
MySQL查询日期时间
2022/05/15 MySQL