滑塊驗(yàn)證

效果圖

代碼

創(chuàng)建xxx.vue組件

單獨(dú)創(chuàng)建一個(gè)文件在需要的地方進(jìn)行調(diào)取引用 <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: {// 成功之后的函數(shù)successFun: {type: Function},//成功圖標(biāo)successIcon: {type: String,default: 'el-icon-success'},//成功文字successText: {type: String,default: '驗(yàn)證成功'},//開始的圖標(biāo)startIcon: {type: String,default: 'el-icon-d-arrow-right'},//開始的文字startText: {type: String,default: '請(qǐng)拖住滑塊，拖動(dòng)到最右邊'},//失敗之后的函數(shù)errorFun: {type: Function},//或者用值來進(jìn)行監(jiān)聽status: {type: String}},data() {return {disX: 0,rangeStatus: false}},methods: {//滑塊移動(dòng)rangeMove(e) {let ele = e.targetlet startX = e.clientXlet eleWidth = ele.offsetWidthlet parentWidth = ele.parentElement.offsetWidthlet MaxX = parentWidth - eleWidthif (this.rangeStatus) {//不運(yùn)行return false}document.onmousemove = e => {let endX = e.clientXthis.disX = endX - startXif (this.disX <= 0) {this.disX = 0}if (this.disX >= MaxX - eleWidth) {//減去滑塊的寬度,體驗(yàn)效果更好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)'//執(zhí)行成功的函數(shù)this.errorFun && this.errorFun()} else {this.rangeStatus = trueif (this.status) {this.$parent[this.status] = true}//執(zhí)行成功的函數(shù)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 }//添加點(diǎn)擊事件methods: {// 滑塊驗(yàn)證成功回調(diào)handleSuccessFun() {this.login_model.status = true},// 滑塊驗(yàn)證失敗回調(diào)handleErrorFun() {},}

參考滑塊

拼圖驗(yàn)證(隨機(jī)動(dòng)態(tài)圖片)

效果圖

代碼

• 安裝插件

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

• main.js引入

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼圖驗(yàn)證碼 Vue.use(SlideVerify)

• 組件中使用

----------------------html<slide-verify:l="42":r="20":w="362":h="140"slider-text="向右滑動(dòng)"@success="onSuccess"@fail="onFail"@refresh="onRefresh":style="{width:'362px'}"class="slide-box"ref="slideBlock"></slide-verify>----------------------點(diǎn)擊滑動(dòng)事件// 拼圖成功onSuccess() {alert('拼圖成功');},// 拼圖失敗onFail() {alert('拼圖失敗');},// 拼圖刷新onRefresh() {alert('拼圖刷新');},

參考拼圖

拼圖驗(yàn)證(本地圖片)

效果圖

這個(gè)不是到自動(dòng)刷新更變圖片的操作

代碼

• 安裝插件

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

• main.js引入

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼圖驗(yàn)證碼 Vue.use(SlideVerify)

• 組件中使用

----------------------html<slide-verify:l="40":r="6":w="350":h="170":imgs="picArray":show="false"slider-text="向右滑動(dòng)完成驗(yàn)證"ref="slideverify"@success="onSuccess"></slide-verify>----------------------data定義本地圖片 data(){ return{picArray: [require("../../assets/image/bg.png"),], } }----------------------點(diǎn)擊滑動(dòng)事件// 拼圖成功onSuccess() {// 拼圖成功},

參考

隨機(jī)數(shù)字驗(yàn)證

效果圖

繪制不帶干擾線 //去掉這2個(gè)方法 // this.drawLine(ctx); // this.drawDot(ctx); 下方是帶干擾線的圖形

代碼

封裝一個(gè)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: {// 生成一個(gè)隨機(jī)數(shù)randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);},// 生成一個(gè)隨機(jī)的顏色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);// 修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度ctx.translate(x, y);ctx.rotate((deg * Math.PI) / 180);ctx.fillText(txt, 0, 0);// 恢復(fù)坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度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) {// 繪制干擾點(diǎn)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>驗(yàn)證碼：</span><el-inputstyle="width: 180px"type="text"v-model="inputCode"placeholder="請(qǐng)輸入您的驗(yàn)證碼"/><div @click="refreshCode()"><!--驗(yàn)證碼組件--><SecurityCode :identifyCode="identifyCode"></SecurityCode></div><el-button type="primary" @click="getSubmitData()">提交</el-button></div> </template> <script> //導(dǎo)入組件 import SecurityCode from "../login/components/sliderCheck.vue"; export default {components: { SecurityCode },data() {return {identifyCodeType: "1234567890", //定義驗(yàn)證類型 1.數(shù)字 2.字母identifyCode: "",inputCode: "", //text框輸入的驗(yàn)證碼};},methods: {//驗(yàn)證碼規(guī)則getSubmitData() {if (this.inputCode == "") {alert("請(qǐng)輸入驗(yàn)證碼");return;}if (this.identifyCode !== this.inputCode) {this.inputCode = "";this.refreshCode();alert("請(qǐng)輸入正確的驗(yàn)證碼!");return;} else {this.$message({message: "驗(yàn)證成功",type: "success",});}},//驗(yàn)證碼randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);},//初始化驗(yàn)證碼refreshCode() {this.identifyCode = ""; //輸入框置空this.makeCode(this.identifyCodeType, 4); //驗(yàn)證碼長度為4},//隨機(jī)切換驗(yàn)證碼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

總結(jié)

以上是生活随笔為你收集整理的登录验证----滑块/拼图碎片/随机num的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。