美文网首页
基于滑动式的验证码:slide-verify

基于滑动式的验证码:slide-verify

作者: 橙赎 | 来源:发表于2020-04-26 16:59 被阅读0次

效果图


官网:https://gitee.com/monoplasty/vue-monoplasty-slide-verify
  • 安装: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="向右滑动"
            @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 = ''
            }
        }
    }

内置方法:

  • 在父组件里如果需要重置,可以在父组件中调用子组件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">在父组件可以点我刷新哦</button>
  <div>{{msg}}</div>
</template>

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

相关文章

网友评论

      本文标题:基于滑动式的验证码:slide-verify

      本文链接:https://www.haomeiwen.com/subject/esrjwhtx.html