vue-image-verify

效果

安装

npm install vue-f-image-verify konva -S

使用

src/main.js

import ImageVerify from 'vue-f-image-verify'
import 'vue-f-image-verify/lib/image-verify.css'
import Konva from 'konva'
Vue.use(ImageVerify)
Vue.use(Konva)

test.vue

<template>
    <div>
        <image-verify :images="images" v-if="isShow">
            <template slot="button">
                <img :src="button" alt="" >
            </template>
        </image-verify>
        <button @click="refresh">刷新</button>
    </div>
</template>

<script>
import image1 from '@/static/image1.png'
import image2 from '@/static/image2.png'
import button from '@/static/button.png'

export default {
    name: 'Login',
    data() {
        return {
            images: [image1, image2],
            button,
            isShow: true
        }
    },
    methods: {
        // 刷新
        refresh () {
            this.isShow = false
            this.$nextTick(() => {
                this.isShow = true
            })
        }
    }
}
</script>

配置

属性

参数 | 说明 | 数据类型 | 可选值 | 默认值 --- | --- | --- | --- | --- images | 用来显示的图片地址数组 | array | --- | --- spacing | 移动的拼图和缺口距离小于该数值通过验证 | number | --- | 5 sliderText | 滑块提示语 | String | --- | 拖动滑块完成上方拼图 showValidateText | 是否展示验证后的提示语 | Boolean | --- | true validateFailText | 验证失败提示语 | String | --- | 拖动滑块将悬浮图像正确拼合 validateSucText | 验证成功提示语 | String | --- | 验证通过,正在登录... resumeSpeed | 验证失败后拼图回弹速度 | Number | 大于0 | 5 failDelay | 验证失败后拼图回弹延时 | Number | 大于0 | 1500 width | 图片区域宽度 | Number | >=100 | 280 height | 图片区域高度 | Number | >=100 | 180 puzzleSize | 拼图宽高 | Number | --- | 40 outWidth | 拼图凸起部分或凹陷部分的宽度 | Number | --- | 12 outHeight | 拼图凸起部分或凹陷部分的高度 | Number | --- | 6 sliderBtnSize | 滑块宽高 | Number | >36 | 60 padding | 初始拼图离边缘距离 | Number | >0 | 10 randomX | 拼图终点位置X | Number | 大于(padding+puzzleSize) 小于(width-padding) | 随机 randomY | 拼图终点位置Y | Number | 大于等于padding 小于(height-padding) | 随机 puzzleType | 拼图类型及朝向 | Number | 1,2,3...16 | 随机

slot

name | 说明 --- | --- button | 滑块图片或者svg等 foot | 底部添加内容（如关闭刷新等）

事件

name | 说明 | 参数 --- | --- | --- validate | 移动拼图后验证结果时触发 参数 1.是否通过 参数 2. 拼图位置 | isPass, { x, y } validated | 验证失败后，回弹动画结束后触发 | ---