vue3.0实现点击切换验证码(组件)及校验
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码,供大家参考,具体内容如下
先看效果
父组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | < 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 可以去官网查看各 代表的含义 官网
子组件 封装组件,即用即粘贴
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | < 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前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码,需要的朋友可以参考下2023-10-10
最新评论