阅读 340

vue插件(一)---(滑块验证vue-puzzle-vcode)

vue拼图验证(vue-puzzle-vcode)

01首先安装依赖

npm install vue-puzzle-vcode --save
复制代码

02使用详解

HTML
<vcode
      :show="isShow" // 控制开关
      @success="onSuccess()"//成功通过验证的回调
      @close="onClose()"//用户点击遮罩层的回调
      successText="验证通过,已发送短信"
      />
复制代码
vue.js
import Vcode from "vue-puzzle-vcode";
  export default {
    data(){
      return {
        isShow: false, // 验证码模态框是否出现
      }
    },
    components:{
      Vcode
    },
    methods:{
      // 用户通过了验证
      onSuccess(){
        this.isShow = false; // 通过验证后,需要手动隐藏模态框
        //可执行通过验证后的操作
      },
      // 用户点击遮罩层,应该关闭模态框
      onClose(){
        this.isShow = false;
      }
    }
  }
复制代码
参数
字段类型默认值说明
showBooleanfalse是否显示验证码弹框
canvasWidthNumber310主图区域的宽度
canvasHeightNumber160主图区域的高度
imgsArraynull自定义图片,见下方例子
successTextString"验证通过!"验证成功时的提示文字
failTextString"验证失败,请重试"验证失败时的提示文字
sliderTextString"拖动滑块完成拼图"下方滑动条里的文字
事件
事件名返回值说明
success偏差值验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px
fail偏差值验证失败时会触发,返回值同上
closenull用户点击遮罩层的回调

03自定义图片

<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>
复制代码

本文转载自www.cnblogs.com/zyfeng/p/13…

文章分类
前端
文章标签