滑塊驗證

效果圖

代碼

創建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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。