zoukankan      html  css  js  c++  java
  • vue拼图验证(vue-puzzle-vcode)

    首先安装依赖

    npm install vue-puzzle-vcode --save

    使用

    html:

    <Vcode :show="isShow" @success="onSuccess"/>

    js:

    import Vcode from "vue-puzzle-vcode";
      export default {
        data(){
          return {
            isShow: false, // 验证码模态框是否出现
          }
        },
        components:{
          Vcode
        },
        methods:{// 用户通过了验证
          success(){
            this.isShow = false; // 通过验证后,需要手动隐藏模态框
          },
        }
      }

    参数

    字段类型默认值说明
    show Boolean false 是否显示验证码弹框
    canvasWidth Number 310 主图区域的宽度
    canvasHeight Number 160 主图区域的高度
    imgs Array null 自定义图片,见下方例子
    successText String "验证通过!" 验证成功时的提示文字
    failText String "验证失败,请重试" 验证失败时的提示文字
    sliderText String "拖动滑块完成拼图" 下方滑动条里的文字

    事件

    事件名返回值说明
    success 偏差值 验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px
    fail 偏差值 验证失败时会触发,返回值同上
    close null 用户点击遮罩层的回调

    自定义图片

    <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>

     

     

  • 相关阅读:
    docker相关资源监控采集方法整理
    三节课MINI计划第四周
    三节课MINI计划第五周
    三节课MINI计划第四周
    三节课MINI计划第三周
    三节课MINI计划第二周
    Bilibili用户需求分析报告
    三节课MINI计划第一周
    《产品思维30讲 》学习笔记
    PHP-FPM未授权访问漏洞
  • 原文地址:https://www.cnblogs.com/zyfeng/p/13405073.html
Copyright © 2011-2022 走看看