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