vue-puzzle-vcode-check-wt v1.1.2

vue-puzzle-vcode-check-wt

Vue 拼图人机验证、右滑拼图验证 用了vue-puzzle-vcode，但是他没有后端校验。所有，在vue-puzzle-vcode的基础上新增后端校验。想要查看vue-puzzle-vcode内容，请自行搜索。

安装

  npm install vue-puzzle-vcode-check-wt --save

使用

  import Vcode from "vue-puzzle-vcode-check";
 <Vcode
                    :show="isShow"
                    :pinXY="pinXY"
                    :canvasWidth="canvasWidth"
                    :canvasHeight="canvasHeight"
                    @onSuccess="onSuccess"
                    @onClose="onClose"
                    :imgs="imgs_arr"
                  />

例子

<template>
 <Vcode
                    :show="isShow"
                    :pinXY="pinXY"
                    :canvasWidth="canvasWidth"
                    :canvasHeight="canvasHeight"
                    @onSuccess="onSuccess"
                    @onClose="onClose"
                    :imgs="imgs_arr"
                  />
  <button @click="onSubmit">登录</button>
</template>

<script>
    import Vcode from "vue-puzzle-vcode-check";
  export default {
    data(){
      return {
        isShow: false, // 验证码模态框是否出现
      }
    },
    components:{
      Vcode
    },
    methods:{
      onSubmit(){
        this.isShow = true;
      },
      // 用户通过了验证
      // 用户通过了验证
      onSuccess(msg, newX) {
        console.log('验证码验证成功')
        console.log(msg)
        console.log(newX)
        //把msg和newX传入后端校验
        // this.isShow = false; // 通过验证后，需要手动隐藏模态框
        /**
         * //后端校验公式  
         * //session值：pinX pinY
         * //传入值newX
         *const startWidth=50
         * const startX=0
         * const canvasWidth=310
         * var  w = startWidth + newX - startX;
         * var styleWidth=w < 50 ? 50 : w > this.canvasWidth ? this.canvasWidth : w;
         *       var x = Math.abs(
                 pinX -
                  (styleWidth - 50) +
                  20 * ((styleWidth - 50) / (canvasWidth - 50)) -
                  3
              );
              x<10 且等于前端传入的x 则成功校验
         */
        //签到成功，从后端获取签到的日期
        this.todayCome = '8:25'
        this.isShow = false;
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose(){
        this.isShow = false;
      }
    }
  }
</script>

##后端校验公式

   
  //session值：pinX pinY
  //传入值newX
 const startWidth=50
  const startX=0
  const canvasWidth=310
  var  w = startWidth + newX - startX;
  var styleWidth=w < 50 ? 50 : w > this.canvasWidth ? this.canvasWidth : w;
        var x = Math.abs(
         pinX -
          (styleWidth - 50) +
          20 * ((styleWidth - 50) / (canvasWidth - 50)) -
          3
      );
      x<10 且等于前端传入的x 则成功校验
 

参数

事件

自定义图片

<template>
  <Vcode :imgs="[Img1, Img2]" />
</template>

<script>
import Img1 from '~/assets/img1.png';
import Img2 from '~/assets/img2.png';

export default {
  data(){
    return {
      Img1,
      Img2
    }
  }
}
</script>

• 也可以是网络图片完整URL路径，但注意图片跨域问题

说明

• 当不传递imgs字段或图片加载出错时，会自动生成随机图片
• 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框