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前端组件学习教程进行学习。

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

(0)

相关推荐

  • vue 实现通过手机发送短信验证码注册功能

    效果如下: 代码如下: template代码: <el-main> <el-form :model="ReginForm" ref="ReginForm" :rules="rule" class="regform" label-width="0"> <h3 class="login-text">手机注册</h3> <el-form-i

  • 简单实现vue验证码60秒倒计时功能

    本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''

  • VUE实现图片验证码功能

    本文实例为大家分享了VUE实现图片验证码的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 在开发过程中,有时候需要使用图片验证码进行增加安全强度,在点击图片时更新新的图片验证码,记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 <template> <el-form style="width: 400px;"> <el-form-item style="height: 40px;margin-bottom: 20px;

  • Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q

  • vue实现验证码输入框组件

    先来看波完成效果图 需求 输入4位或6位短信验证码,输入完成后收起键盘 实现步骤 第一步 布局排版 <div class="security-code-wrap"> <label for="code"> <ul class="security-code-container"> <li class="field-wrap" v-for="(item, index) in num

  • Vue实现滑动拼图验证码功能

    缘由:之前看哔哩哔哩官网登录的时候有一个拼图验证码,很好奇怎么去实现.然后就想着自己弄一个.先给大家看我的最终效果.后面再一点点拆解代码. 为什么想着写这个功能呢,主要在于拼图验证码在前端这里会比较复杂并且深入.相比文字拼写,12306的图片验证码都没有拼图验证码对前端的要求来的复杂,和难. 我总结下知识点: 1.弹窗功能 2.弹窗基于元素定位 3.元素拖动 4.canvas绘图 5.基础逻辑 一.弹窗和弹窗组件 抱歉,这里我偷懒了直接用了elementUI的el-popover组件,所以小伙伴

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • 基于vue的短信验证码倒计时demo

    最近做了一个小的demo,分享给大家,在很多地方都能用到. 一般获取短信验证码的时候会用到这个demo: button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span

  • vue生成随机验证码的示例代码

    本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

随机推荐