Vue插件之滑動(dòng)驗(yàn)證碼用法詳解
更新時(shí)間：2020年04月05日 11:22:01 作者：monoplasty
這篇文章主要介紹了Vue插件之滑動(dòng)驗(yàn)證碼用法,結(jié)合實(shí)例形式詳細(xì)分析了Vue滑動(dòng)驗(yàn)證碼插件相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了Vue插件之滑動(dòng)驗(yàn)證碼用法。分享給大家供大家參考，具體如下：
目錄
預(yù)覽
基于滑動(dòng)式的驗(yàn)證碼，免于字母驗(yàn)證碼的繁瑣輸入 用于網(wǎng)頁注冊(cè)或者登錄
目前僅前端實(shí)現(xiàn)，支持移動(dòng)端滑動(dòng)事件。版本V1.1.2
github文檔地址： https://github.com/monoplasty/vue-monoplasty-slide-verify
gitee鏡像地址：https://gitee.com/monoplasty/vue-monoplasty-slide-verify
安裝
npm install --save vue-monoplasty-slide-verify
使用方法
// main.js
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
// template
<slide-verify
ref="slideblock"
@again="onAgain"
@fulfilled="onFulfilled"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:accuracy="accuracy"
:slider-text="text"
></slide-verify>
<div>{{msg}}</div>
<button @click="handleClick">在父組件可以點(diǎn)我刷新哦</button>
// script
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑',
// 精確度小，可允許的誤差范圍??；為1時(shí)，則表示滑塊要與凹槽完全重疊，才能驗(yàn)證成功。默認(rèn)值為5
accuracy: 1,
}
},
methods: {
onSuccess(){
console.log('驗(yàn)證通過');
this.msg = 'login success'
},
onFail(){
console.log('驗(yàn)證不通過');
this.msg = ''
},
onRefresh(){
console.log('點(diǎn)擊了刷新小圖標(biāo)');
this.msg = ''
},
onFulfilled() {
console.log('刷新成功啦！');
},
onAgain() {
console.log('檢測(cè)到非人為操作的哦！');
this.msg = 'try again';
// 刷新
this.$refs.slideblock.reset();
},
handleClick() {
// 父組件直接可以調(diào)用刷新方法
this.$refs.slideblock.reset();
},
}
}
更新記錄
V1.1.2 版本
- 修復(fù)
imgs參數(shù)不傳是的warn
V1.1.1 描述（此版本有bug,請(qǐng)使用最新版）
accuracy精度設(shè)置
判斷滑塊與凹槽位置的誤差范圍值，默認(rèn)取值范圍為 [1, 10]。若取值不為 -1，則會(huì)開啟檢測(cè)非人為操作。人為操作也有可能會(huì)觸發(fā)哦！
判斷依據(jù)是：滑塊的一系列移動(dòng)坐標(biāo)的平均值和方差是否相等。若相等則人為是非人為操作。
若
accuracy為 -1，則表示關(guān)閉檢測(cè)非人為操作，默認(rèn)開啟。開啟之后，若檢測(cè)到為非人為操作，則會(huì)觸發(fā)again回調(diào)函數(shù)
V1.1.0 版本新增屬性imgs：
- 當(dāng)
imgs不傳或者傳空數(shù)組時(shí)，圖片庫默認(rèn)使用第三方api提供的圖片路徑?？赡芗虞d緩慢； - 當(dāng)
imgs傳本地路徑時(shí)，確保圖片路徑是否正確。建設(shè)傳cdn上的圖片地址。 - 詳情可參考
APP.vue上的寫法?；?a target="_blank" rel="external nofollow" >在線查看demo地址
內(nèi)置方法
- 在父組件里如果需要重置，可以在父組件中調(diào)用子組件reset() 方法
<slide-verify ref="slideblock" ></slide-verify> // javascript 見使用方法 this.$refs.slideblock.reset();
props傳參（均為可選）
| 參數(shù) | 類型 | 默認(rèn)值 | 描述 | 版本 |
|---|---|---|---|---|
| l | Number | 42 | 滑塊的邊長(zhǎng) | |
| r | Number | 10 | 滑塊突出圓的半徑 | |
| w | Number | 310 | canvas畫布的寬 | |
| h | Number | 155 | canvas畫布的高 | |
| sliderText | String | Slide filled right | 滑塊底紋文字 | 1.0.5 |
| imgs | Array | [] | 背景圖數(shù)組。可不傳 | 1.1.0 |
| accuracy | Number | 5 | 滑動(dòng)驗(yàn)證的誤差范圍 | 1.1.2 |
| show | Boolean | true | 是否顯示刷新按鈕 | 1.1.2 |
自定義回調(diào)函數(shù)
| 事件名 | 類型 | 描述 | 版本 |
|---|---|---|---|
| success | Function | 驗(yàn)證碼匹配成功的回調(diào) | |
| fail | Function | 驗(yàn)證碼未匹配的回調(diào) | |
| refresh | Function | 點(diǎn)擊刷新按鈕后的回調(diào)函數(shù) | |
| again | Function | 檢測(cè)到非人為操作滑動(dòng)時(shí)觸發(fā)的回調(diào)函數(shù) | 1.1.2 |
| fulfilled | Function | 刷新成功之后的回調(diào)函數(shù) | 1.1.2 |
注意事項(xiàng)
目前僅是前端實(shí)現(xiàn)，如有什么問題歡迎issue或者留言。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
electron實(shí)現(xiàn)靜默打印的示例代碼
這篇文章主要介紹了electron實(shí)現(xiàn)靜默打印的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章給大家介紹了vue實(shí)現(xiàn)輪播圖的多種方式,文中給出了四種實(shí)現(xiàn)方式,并通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下2024-02-02
本篇文章主要介紹了vue 開發(fā)一個(gè)按鈕組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點(diǎn),你可以使用ref來引用子組件,然后通過$refs來訪問子組件的DOM,下面這篇文章主要給大家介紹了關(guān)于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關(guān)資料,需要的朋友可以參考下2024-07-07
詳解VScode編輯器vue環(huán)境搭建所遇問題解決方案
這篇文章主要介紹了VScode編輯器vue環(huán)境搭建所遇問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue3封裝Element導(dǎo)航菜單的實(shí)例代碼
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實(shí)例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例
本文主要介紹了Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue項(xiàng)目中如何配置eslint和prettier
這篇文章主要介紹了vue項(xiàng)目中如何配置eslint和prettier問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue.js集成echarts時(shí)遇到的一些問題總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04