/vue-slide-verify

vue slide verify online preview

Primary LanguageVue

vue-slide-verify

A Vue plugin to slide verify Demo,forked from monoplasty/vue-monoplasty-slide-verify

install

npm install --save vue-slide-verify

Usage

<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>

Document

Props

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='

Events

Event Type Describe
success Function success callback
fail Function fail callback
refresh Function refresh button callback