A Vue plugin to slide verify Demo,forked from monoplasty/vue-monoplasty-slide-verify
npm install --save vue-slide-verify
<template>
<slide-verify ref="verifyCode" :l="42" :r="10" :w="310" :h="155" @success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify>
</template>
<script>
import Vue from 'vue';
import SlideVerify from 'vue-slide-verify';
Vue.use(SlideVerify);//use the plugin
export default = {
//...
methods:{
onSuccess(){},
onFail(){},
onRefresh(){},
freshVerify(){
//refresh slide-verify manually.
this.$refs['verifyCode'].refresh();
}
}
//...
}
</script>
Param | Type | Describe |
---|---|---|
l | Number | block length |
r | Number | block circle radius |
w | Number | canvas width |
h | Number | canvas height |
text | String | the tips,default value is 'slide filled right' |
successText | String | tips after verifing successfully,defaut value is 'verify successfully' |
retryText | String | tips after verifing defeat,defaut value is 'try again' |
imgUrl | String | the url fetching img,default value is 'https://picsum.photos/300/150/?image=' |
Event | Type | Describe |
---|---|---|
success | Function | success callback |
fail | Function | fail callback |
refresh | Function | refresh button callback |