登录验证----滑块/拼图碎片/随机num

滑块验证

效果图

代码

创建xxx.vue组件

单独创建一个文件在需要的地方进行调取引用 <template><div class="slider-check-box"><div class="slider-check" :class="rangeStatus ? 'success' : ''"><i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>{{ rangeStatus ? successText : startText }}</div></div> </template> <script> export default {props: {// 成功之后的函数successFun: {type: Function},//成功图标successIcon: {type: String,default: 'el-icon-success'},//成功文字successText: {type: String,default: '验证成功'},//开始的图标startIcon: {type: String,default: 'el-icon-d-arrow-right'},//开始的文字startText: {type: String,default: '请拖住滑块，拖动到最右边'},//失败之后的函数errorFun: {type: Function},//或者用值来进行监听status: {type: String}},data() {return {disX: 0,rangeStatus: false}},methods: {//滑块移动rangeMove(e) {let ele = e.targetlet startX = e.clientXlet eleWidth = ele.offsetWidthlet parentWidth = ele.parentElement.offsetWidthlet MaxX = parentWidth - eleWidthif (this.rangeStatus) {//不运行return false}document.onmousemove = e => {let endX = e.clientXthis.disX = endX - startXif (this.disX <= 0) {this.disX = 0}if (this.disX >= MaxX - eleWidth) {//减去滑块的宽度,体验效果更好this.disX = MaxX}ele.style.transition = '.1s all'ele.style.transform = 'translateX(' + this.disX + 'px)'e.preventDefault()}document.onmouseup = () => {if (this.disX !== MaxX) {ele.style.transition = '.5s all'ele.style.transform = 'translateX(0)'//执行成功的函数this.errorFun && this.errorFun()} else {this.rangeStatus = trueif (this.status) {this.$parent[this.status] = true}//执行成功的函数this.successFun && this.successFun()}document.onmousemove = nulldocument.onmouseup = null}}} } </script> <style lang="scss" scoped> $blue: #198eeb; @mixin jc-flex {display: flex;justify-content: center;align-items: center; } .slider-check-box {.slider-check {background-color: #e9e9e9;position: relative;transition: 1s all;user-select: none;color: #585858;@include jc-flex;height: 40px;&.success {background-color: $blue;color: #fff;i {color: $blue;}}i {position: absolute;left: 0;width: 50px;height: 100%;color: $blue;background-color: #fff;border: 1px solid #d8d8d8;cursor: pointer;font-size: 24px;@include jc-flex;}} } </style>

Login.vue页面引入组件并使用

---- -----------------html<SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck>----------------------jsimport SliderCheck from './components/SliderCheck'components: { SliderCheck }//添加点击事件methods: {// 滑块验证成功回调handleSuccessFun() {this.login_model.status = true},// 滑块验证失败回调handleErrorFun() {},}

参考滑块

拼图验证(随机动态图片)

效果图

代码

• 安装插件

npm install --save vue-monoplasty-slide-verify

• main.js引入

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码 Vue.use(SlideVerify)

• 组件中使用

----------------------html<slide-verify:l="42":r="20":w="362":h="140"slider-text="向右滑动"@success="onSuccess"@fail="onFail"@refresh="onRefresh":style="{width:'362px'}"class="slide-box"ref="slideBlock"></slide-verify>----------------------点击滑动事件// 拼图成功onSuccess() {alert('拼图成功');},// 拼图失败onFail() {alert('拼图失败');},// 拼图刷新onRefresh() {alert('拼图刷新');},

参考拼图

拼图验证(本地图片)

效果图

这个不是到自动刷新更变图片的操作

代码

• 安装插件

npm install --save vue-monoplasty-slide-verify

• main.js引入

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码 Vue.use(SlideVerify)

• 组件中使用

----------------------html<slide-verify:l="40":r="6":w="350":h="170":imgs="picArray":show="false"slider-text="向右滑动完成验证"ref="slideverify"@success="onSuccess"></slide-verify>----------------------data定义本地图片 data(){ return{picArray: [require("../../assets/image/bg.png"),], } }----------------------点击滑动事件// 拼图成功onSuccess() {// 拼图成功},

参考

随机数字验证

效果图

绘制不带干扰线 //去掉这2个方法 // this.drawLine(ctx); // this.drawDot(ctx); 下方是带干扰线的图形

代码

封装一个securityCode组件

<!--securityCode组件--> <template><canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </template> <script> export default {name: "securityCode",props: {identifyCode: {type: String,default: "1234",},fontSizeMin: {type: Number,default: 16,},fontSizeMax: {type: Number,default: 40,},backgroundColorMin: {type: Number,default: 180,},backgroundColorMax: {type: Number,default: 240,},colorMin: {type: Number,default: 50,},colorMax: {type: Number,default: 160,},lineColorMin: {type: Number,default: 40,},lineColorMax: {type: Number,default: 180,},dotColorMin: {type: Number,default: 0,},dotColorMax: {type: Number,default: 255,},contentWidth: {type: Number,default: 112,},contentHeight: {type: Number,default: 38,},},methods: {// 生成一个随机数randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);},// 生成一个随机的颜色randomColor(min, max) {let r = this.randomNum(min, max);let g = this.randomNum(min, max);let b = this.randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";},drawPic() {let canvas = document.getElementById("s-canvas");let ctx = canvas.getContext("2d");ctx.textBaseline = "bottom";// 绘制背景ctx.fillStyle = this.randomColor(this.backgroundColorMin,this.backgroundColorMax);ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);// 绘制文字for (let i = 0; i < this.identifyCode.length; i++) {this.drawText(ctx, this.identifyCode[i], i);}this.drawLine(ctx);this.drawDot(ctx);},drawText(ctx, txt, i) {ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);ctx.font =this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);var deg = this.randomNum(-45, 45);// 修改坐标原点和旋转角度ctx.translate(x, y);ctx.rotate((deg * Math.PI) / 180);ctx.fillText(txt, 0, 0);// 恢复坐标原点和旋转角度ctx.rotate((-deg * Math.PI) / 180);ctx.translate(-x, -y);},drawLine(ctx) {// 绘制干扰线for (let i = 0; i < 8; i++) {ctx.strokeStyle = this.randomColor(this.lineColorMin,this.lineColorMax);ctx.beginPath();ctx.moveTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight));ctx.lineTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight));ctx.stroke();}},drawDot(ctx) {// 绘制干扰点for (let i = 0; i < 100; i++) {ctx.fillStyle = this.randomColor(0, 255);ctx.beginPath();ctx.arc(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight),1,0,2 * Math.PI);ctx.fill();}},},watch: {identifyCode() {this.drawPic();},},mounted() {this.drawPic();}, }; </script>

页面使用

<template><div style="display: flex; align-items: center; justify-content: center"><span>验证码：</span><el-inputstyle="width: 180px"type="text"v-model="inputCode"placeholder="请输入您的验证码"/><div @click="refreshCode()"><!--验证码组件--><SecurityCode :identifyCode="identifyCode"></SecurityCode></div><el-button type="primary" @click="getSubmitData()">提交</el-button></div> </template> <script> //导入组件 import SecurityCode from "../login/components/sliderCheck.vue"; export default {components: { SecurityCode },data() {return {identifyCodeType: "1234567890", //定义验证类型 1.数字 2.字母identifyCode: "",inputCode: "", //text框输入的验证码};},methods: {//验证码规则getSubmitData() {if (this.inputCode == "") {alert("请输入验证码");return;}if (this.identifyCode !== this.inputCode) {this.inputCode = "";this.refreshCode();alert("请输入正确的验证码!");return;} else {this.$message({message: "验证成功",type: "success",});}},//验证码randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);},//初始化验证码refreshCode() {this.identifyCode = ""; //输入框置空this.makeCode(this.identifyCodeType, 4); //验证码长度为4},//随机切换验证码makeCode(o, l) {for (let i = 0; i < l; i++) {this.identifyCode +=this.identifyCodeType[this.randomNum(0, this.identifyCodeType.length)];}console.log(this.identifyCode);},},mounted() {this.refreshCode();}, }; </script>

参考

引入video

参考video

总结

以上是生活随笔为你收集整理的登录验证----滑块/拼图碎片/随机num的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。