一、第一种

  • vue移动端(PC端)图形验证码
  • vue2-verify
  • 前往地址
    常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。
    运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进行验证。
    滑动验证码slide 通过简单的滑动即可完成验证,应用与移动端体验很好。
    拼图验证码puzzle 拼图。
    选字验证码pick 通过按顺序点选图中的汉字完成验证,ie浏览器要求9或以上。
<Verify  @success="onSuccess" @error="onFail" :type="5" :imgSize="imgSize" :imgUrl="imgUrl" :imgName="imgName" :mode="pop" :barSize="barSize" :showButton="showButton"></Verify>  

------------------------script------------------------------
import Verify from 'vue2-verify';
 components: {
      Verify
    },
------------------------options------------------------------------
ready	验证码初始化成功的回调函数。
success	验证码匹配成功后的回调函数。如要重新初始化:success:function(obj){obj.refresh();}。
error	验证码匹配失败后的回调函数。


**其他配置项去上面地址查看**

二、第二种(vue)

  • slide-verify(一款拼图验证码)
  • 图片建议传、不传的话默认图片加载非常慢
  • github文档地址: https://github.com/monoplasty/vue-monoplasty-slide-verify
  • gitee镜像地址:https://gitee.com/monoplasty/vue-monoplasty-slide-verify
//demo
// main.js(全局引入也可以局部引入)
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
// template
<slide-verify 
    ref="slideblock"
    @again="onAgain"
    @fulfilled="onFulfilled"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :accuracy="accuracy"
    :slider-text="text"
></slide-verify>
<div>{{msg}}</div>

<button @click="handleClick">在父组件可以点我刷新哦</button>
// 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();
        },
    }
}

Logo

前往低代码交流专区

更多推荐