kr-slide-verify

简介

一个基于Vue的滑块验证组件，该组件可配后后端代码实现滑块验证功能！

安装与使用

npm安装组件

npm install kr-slide-verity

引入

import Vue from 'vue'
import KrSlideVerify from "kr-slide-verify"

Vue.use(KrSlideVerify)

使用

  <kr-slide-verify
    :w="slideInfo.w"
    :h="slideInfo.h"
    :block_w="slideInfo.block_w"
    :block_h="slideInfo.block_h"
    :img="slideInfo.img"
    :block_img="slideInfo.miniimg"
    :loading="loading"
    @refresh="refresh"
    @verify="valid"
  ></kr-slide-verify>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | -------------------------------------- | ------- | ------------------------- | ------------------ | | w | 画布宽度 | Number | —— | 320 | | h | 画布高度 | Number | —— | 160 | | block_w | 滑块宽度 | Number | —— | 50 | | block_h | 滑块高度 | Number | —— | 160 | | img | 画布背景图地址 | String | —— | —— | | block_img | 滑块图片地址 | String | —— | —— | | sliderText | 操作提示文字 | String | —— | '向右拖动滑块填充拼图' | | loading | 加载标识 | String | true/false | false |

Events

| 事件名称 | 说明 | 回调参数 | | ------- | ------------ | ---------------------- | | refresh | 刷新滑块验证时触发 | (callback:Function) | | verify | 验证滑块位置时触发 | (left:Number,callback:Function) left:滑块向右的滑动量 |