Vue插件之缺口滑塊驗證碼 -適合於手機和pc（插件vue-monoplasty-slide-verify）

預覽

基於滑動式的驗證碼，免於字母驗證碼的繁瑣輸入 用於網頁注冊或者登錄

 

 

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時，則表示滑塊要與凹槽完全重疊，才能驗證成功。默認值為5
accuracy: 1,
}
},
methods: {
onSuccess(){
console.log('驗證通過');
this.msg = 'login success'
},
onFail(){
console.log('驗證不通過');
this.msg = ''
},
onRefresh(){
console.log('點擊了刷新小圖標');
this.msg = ''
},
onFulfilled() {
console.log('刷新成功啦！');
},
onAgain() {
console.log('檢測到非人為操作的哦！');
this.msg = 'try again';
// 刷新
this.$refs.slideblock.reset();
},
handleClick() {
// 父組件直接可以調用刷新方法
this.$refs.slideblock.reset();
},
}
}

 

內置方法

在父組件里如果需要重置，可以在父組件中調用子組件reset() 方法

<slide-verify ref="slideblock" ></slide-verify>
// javascript  見使用方法
this.$refs.slideblock.reset();

 

props傳參（均為可選）

參數    類型    默認值    描述    版本
l    Number    42    滑塊的邊長    
r    Number    10    滑塊突出圓的半徑    
w    Number    310    canvas畫布的寬    
h    Number    155    canvas畫布的高    
sliderText    String    Slide filled right    滑塊底紋文字    1.0.5
imgs    Array    []    背景圖數組。可不傳    1.1.0
accuracy    Number    5    滑動驗證的誤差范圍    1.1.2
show    Boolean    true    是否顯示刷新按鈕    1.1.2

自定義回調函數

事件名	類型	描述	版本
success	Function	驗證碼匹配成功的回調	
fail	Function	驗證碼未匹配的回調	
refresh	Function	點擊刷新按鈕后的回調函數	
again	Function	檢測到非人為操作滑動時觸發的回調函數	1.1.2
fulfilled	Function	刷新成功之后的回調函數	1.1.2