vue-prevention-robot

安装

npm install -S vue-prevention-robot

引入

const vuePreventionRobot = require("vue-prevention-robot")
Vue.use(vuePreventionRobot)

使用

<prevention-robot v-model="isVerificationShow1"  :puzzleImgList="puzzleImgList" :onSuccess="handleSuccess" />


<script>
    export default {
        data(){
			return {
                puzzleImgList: [
                    require("@/assets/thumbnail-img01.jpg"),
                    require("@/assets/thumbnail-img02.jpg"),
                    require("@/assets/thumbnail-img03.jpg")
                ]
            }
        }
    }
</script>

参数配置

| 参数名 | 说明 | 类型 | 可选值 | 默认值 | | :--------------: | :-----------------------------------: | :------------: | :--------------: | :------: | | verificationShow | 展示 | Boolean | true， false | false | | width | 图片宽度 | String，Number | — | 260 | | height | 图片高度 | String，Number | — | 120 | | puzzleImgList | 图片集合 | Array | — | 默认图片 | | blockSize | 滑块大小 | String，Number | — | 40 | | blockRadius | 滑块圆角大小，blockType为square时有效 | String，Number | — | 4 | | deviation | 滑块误差判断 | String，Number | — | 4 | | wraperPadding | 滑块能出现的范围（距离右边的距离） | String，Number | — | 20 | | blockType | 方块类型 | String | square， puzzle | square | | onSuccess | 成功回调函数 | Function | — | — | | onError | 失败回调函数 | Function | — | — |

**注意：**puzzleImgList的图片列表 宽高最好统一，至少宽高比例一致，然后配置 width及 height。 防止图片变形。