vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
前言
眾所周知,網(wǎng)頁(yè)中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式,其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式。從開發(fā)的角度來(lái)看要想實(shí)現(xiàn)這個(gè)功能還是需要一點(diǎn)時(shí)間的,但其實(shí)網(wǎng)上已經(jīng)有很多專門針對(duì)圖片滑動(dòng)驗(yàn)證功能的插件了,今天就給大家分享一款好用的插件 ----- vue-monoplasty-slide-verify。
一、安裝
使用
npm
安裝vue-monoplasty-slide-verify
插件。
npm i vue-monoplasty-slide-verify --savve cnpm i vue-monoplasty-slide-verify --savve //鏡像安裝
接著我們?cè)?
main.js
中引入。
import slideVerify from "vue-monoplasty-slide-verify"; Vue.use(slideVerify);
二、使用
在使用之前我們先來(lái)看看它的一些屬性和回調(diào)函數(shù)。
屬性
參數(shù) | 描述 |
---|---|
l | 滑動(dòng)碎片的大小 |
r | 滑動(dòng)碎片的圓角 |
w | 畫布的寬 |
h | 畫布的高 |
imgs | 背景圖數(shù)組,默認(rèn)值 [],為 [] 時(shí)隨機(jī)加載插件圖片 |
accuracy | 滑動(dòng)驗(yàn)證的誤差范圍,默認(rèn)值 5 |
show | 是否顯示刷新按鈕,默認(rèn)值 true |
回調(diào)函數(shù)
函數(shù)名 | 描述 |
---|---|
success | 返回時(shí)間參數(shù),單位為毫秒 |
fail | 驗(yàn)證不通過(guò)時(shí)的回調(diào)函數(shù) |
refresh | 點(diǎn)擊刷新按鈕后的回調(diào)函數(shù) |
again | 檢測(cè)到非人為操作滑動(dòng)時(shí)觸發(fā)的回調(diào)函數(shù) |
fulfilled | 刷新成功之后的回調(diào)函數(shù) |
在父組件里如果需要重置,可以在父組件中調(diào)用子組件
reset()
方法。
1. 指定 ref
的值
<slide-verify ref="slideblock" ></slide-verify>
2. 調(diào)用
this.$refs.slideblock.reset();
以上是我們實(shí)現(xiàn)這個(gè)功能基本都會(huì)用到的一些配置,感興趣的同學(xué)可以去 官網(wǎng)文檔 查看更詳細(xì)的內(nèi)容。下面我們?cè)囍鴣?lái)用代碼實(shí)現(xiàn)這個(gè)功能。
為了方便在項(xiàng)目中使用,我直接將其封裝成公共的組件,這樣無(wú)論在任何頁(yè)面都可以直接引入使用,如果需要修改配置,可通過(guò) props
和 emit
傳參修改在組件中寫死的屬性值。
封裝文件(子組件)
文件路徑:
src/components/verification/index.vue
<template> <div> <!-- vant 彈框組件,也可自定義彈框 --> <van-popup v-model="isShowSlide" :visible.sync="isShowSlide" @close="$emit('update:dialogChild', false)"> <div class="contantBox"> <p>安全驗(yàn)證</p> <slide-verify :l="canvas.l" :r="canvas.r" :w="canvas.w" :h="canvas.h" ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :accuracy="3" :imgs="imgs" slider-text="拖動(dòng)滑塊完成拼圖"> </slide-verify> <!-- 耗時(shí) --> <div>{{timeDate}}</div> </div> </van-popup> </div> </template> <script> export default { data() { return { timeDate: "", //耗時(shí) canvas: { l: 28, //滑動(dòng)碎片的大小 r: 7, //滑動(dòng)碎片的圓角 w: 300, //畫布的寬 h: 160, //畫布的高 }, isShowSlide: false, //彈框顯隱 imgs: [ require("@/assets/1.png"), require("@/assets/2.png"), require("@/assets/3.png"), ], //自定義的隨機(jī)圖片 timer: null, //定時(shí)器 }; }, props: { dialogChild: { type: Boolean, default: false, }, }, watch: { dialogChild: { handler(newName, oldName) { this.isShowSlide = newName; }, deep: true, }, }, methods: { // 返回時(shí)間參數(shù),單位為毫秒 onSuccess(times) { this.$emit("successOn", times); this.timeDate = "驗(yàn)證通過(guò),耗時(shí)" + (times / 1000).toFixed(1) + "s"; // 成功后關(guān)閉彈框 this.timer = setInterval(() => { this.isShowSlide = false; }, 1000); }, // 驗(yàn)證不通過(guò)時(shí)的回調(diào)函數(shù) onFail() { this.$emit("failOn"); console.log("驗(yàn)證不通過(guò)"); this.timeDate = ""; }, // 點(diǎn)擊刷新按鈕后的回調(diào)函數(shù) onRefresh() { this.$emit("refreshOn"); console.log("點(diǎn)擊了刷新圖標(biāo)"); this.timeDate = ""; }, // 刷新成功之后的回調(diào)函數(shù) onFulfilled() { this.$emit("fulfilledOn"); console.log("刷新成功"); }, // 檢測(cè)到非人為操作滑動(dòng)時(shí)觸發(fā)的回調(diào)函數(shù) onAgain() { this.$emit("againOn"); console.log("檢測(cè)到非人為操作的哦"); // 刷新 this.$refs.slideblock.reset(); }, // 父組件調(diào)用刷新方法(每次進(jìn)來(lái)重置組件) handleClick() { this.$nextTick(() => { this.timeDate = ""; clearInterval(this.timer);//清除定時(shí)器 this.$refs.slideblock.reset(); }); }, }, }; </script> <style scoped> p { display: flex; justify-content: center; font-size: 15px; margin: 8px 0px; } .contantBox { padding: 0px 8px 8px 8px; } </style>
組件內(nèi)使用(父組件)
<template> <div> <!-- 使用組件 --> <van-button @click="verifyOn" round color="linear-gradient(to right,#FE566D, #F83D2A)" type="primary" block>獲取驗(yàn)證碼</van-button> <!-- 如若想要修改其它參數(shù)通過(guò)props動(dòng)態(tài)傳值即可 --> <verification ref="parent" :dialogChild.sync="isShowSlide" /> </div> </template> <script> // 引入組件 import verification from "@/components/verification"; export default { data() { return { isShowSlide: false, }; }, components: { verification, }, methods: { // 點(diǎn)擊獲取驗(yàn)證碼按鈕 verifyOn() { this.isShowSlide = true; // 每次點(diǎn)擊都觸發(fā)一下重置驗(yàn)證組件的方法 this.$refs.parent.handleClick(); }, }, }; </script>
實(shí)現(xiàn)效果
到此這篇關(guān)于vue 實(shí)現(xiàn)左滑圖片驗(yàn)證的文章就介紹到這了,更多相關(guān)vue 左滑圖片驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級(jí)傳值,vuex)
這篇文章主要介紹了uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級(jí)傳值,vuex),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch
這篇文章主要介紹了vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue.js響應(yīng)式原理解析與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue.js響應(yīng)式原理解析與實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫(kù)
這篇文章主要介紹了?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫(kù),我們通過(guò)考慮其功能、工作原理以及如何開始使用它來(lái)了解?Vue?Demi,下面我們一起進(jìn)入文章學(xué)起來(lái)吧2022-02-02vue3中的reactive函數(shù)聲明數(shù)組方式
這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05