效果圖

• 安裝：npm install --save vue-monoplasty-slide-verify
• 使用：

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑動(dòng)"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>

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

內(nèi)置方法：

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

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

this.$refs.slideblock.reset();

參考如下地址：

<template>
  <slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :accuracy="accuracy"></slide-verify>
  <button @click="handleClick">在父組件可以點(diǎn)我刷新哦</button>
  <div>{{msg}}</div>
</template>

<script>
    export default {
        name: 'App',
        data(){
            return {
                msg: '',
                text: '向右滑動(dòng)->',
                // 精確度小，可允許的誤差范圍??；為1時(shí)，則表示滑塊要與凹槽完全重疊，才能驗(yàn)證成功。默認(rèn)值為5
                accuracy: 1,
            }
        },
        methods: {
            onSuccess(){
                console.log('驗(yàn)證通過(guò)');
                this.msg = 'login success'
            },
            onFail(){
                console.log('驗(yàn)證不通過(guò)');
                this.msg = ''
            },
            onRefresh(){
                console.log('點(diǎn)擊了刷新小圖標(biāo)');
                this.msg = ''
            },
            onFulfilled() {
                console.log('刷新成功啦！');
            },
            onAgain() {
                console.log('檢測(cè)到非人為操作的哦！');
                this.msg = 'try again';
                // 刷新
                this.$refs.slideblock.reset();
            },
            handleClick() {
                this.$refs.slideblock.reset();
            },
        }
    }
</script>