slide-verification

测试 UI组件打包发布

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Quick Start

1. Import slide-verification into your vue.js project.

Using build tools:

npm install slide-verification --save 

import Vue from 'vue';
import SlideVerification from 'slide-verification';

Vue.use(SlideVerification);

2. Now you have it. The simplest usage:

<slide-verification :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verification>
<div>{{msg}}</div>

export default {
        name: 'App',
        data(){
            return {
                msg: '',
            }
        },
        methods: {
            onSuccess(){
                this.msg = 'login success'
            },
            onFail(){
                this.msg = ''
            },
            onRefresh(){
                this.msg = ''
            }
        }
    }

argument

| Param | Type | Describe | Version | | :------: | :------: | :------: | :-----: | | l | Number | block length | | | r | Number | block circle radius | | | w | Number | canvas width | | | h | Number | canvas height | | | sliderText | String | Slide filled right | images | Array | picture array 背景图数组，默认值 [] | accuracy | Number | 滑动验证的误差范围，默认值 5 | show | Boolean | 是否显示刷新按钮，默认值 true

内置方法

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

<slide-verification ref="slideblock" ></slide-verification>

this.$refs.slideblock.reset();

example

可参考如下用法：

<template>
  <slide-verification ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :accuracy="accuracy"></slide-verification>
  <button @click="handleClick">在父组件可以点我刷新哦</button>
  <div>{{msg}}</div>
</template>

<script>
    export default {
        name: 'App',
        data(){
            return {
                msg: '',
                text: '向右滑动->',
                // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
                accuracy: 1,
            }
        },
        methods: {
            onSuccess(times){
                console.log('验证通过，耗时 '+ times + '毫秒');
                this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
            },
            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();
            },
        }
    }
</script>