Vue中做滑块登录验证

// 先获取lib文件夹，在博客园里的文件里：https://i.cnblogs.com/files

// 然后在main.js中引入

import SlideVerify from './lib/index'

//Vue.config.productionTip = false

Vue.use(SlideVerify)

//最后在要使用的组件中引入即可
<slide-verify ref="slideblock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled" @fail="onFail" @refresh="onRefresh" :slider-text="text" :imgs="imgs" :accuracy="accuracy"></slide-verify>


// script内容
<script>
    import img0 from './assets/img.jpg';
    import img1 from './assets/img1.jpg';
    import img2 from './assets/img2.jpg';
    import img3 from './assets/img3.jpg';
    import img4 from './assets/img4.jpg';
    import img5 from './assets/img5.jpg';
    export default {
        name: 'App',
        data(){
            return {
                msg: '',
                text: '向右滑动->',
                imgs: [
                  img0,
                  img1,
                  img2,
                  img3,
                  img4,
                  img5,
                ],
                accuracy: 1, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
            }
        },
        methods: {
            onSuccess(times){
                console.log('验证通过');
                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.handleClick();
            },
            handleClick() {
                this.$refs.slideblock.reset();
                this.msg = ''
            },
        }
    }
</script>