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 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue3.0 手写放大镜效果
Jul 25 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP7常量数组用法分析
2016/09/26 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
JavaScript版代码高亮
2006/06/26 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Flask数据库迁移简单介绍
2017/10/24 Python
使用python模拟命令行终端的示例
2019/08/13 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
自荐信封面
2013/12/04 职场文书
学生打架检讨书
2014/02/14 职场文书
高级销售求职信
2014/02/21 职场文书
合作协议书怎么写
2014/04/18 职场文书
青岛导游词
2015/02/12 职场文书
奖励通知
2015/04/22 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android