前端（vue）实现图形（拼图等）验证码

一、第一种

• vue移动端（PC端）图形验证码

• vue2-verify

地址：https://www.npmjs.com/package/vue2-verify/v/1.0.2

常规验证码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();
        },
    }
}