滑动拼图（vue2版）

vue3版本 | vue2版本

安装

npm i vue-puzzle-slider

使用

import vuePuzzleSlider from 'vue-puzzle-slider';

Vue.use(vuePuzzleSlider);

0. 使用前提

* 将包中的static文件夹下的文件放到本地static文件夹下
* 安装了axios请求方式，并在全局封装了$get(get方式)和$post(post方式)
* ul1与url2传输的x有独特的加密/解密方式,有需要可以留言
* 范围值计算方式推荐
>
xMin = space + r + squareX / 2;
xMax = width - r - space - squareX;
yMin = space + r;
yMax = height - r - space - squareX;
>

1. 参数

dev：前端调试模式，临时修改url1与url2返回的值-->Boolean;非必传;默认false*

space：抠图到图形边沿的距离-->Number;非必传;默认10*

* url1：向后台传参r（圆弧最大半径）、
squareX（方块边长）、
width（当前画布的宽）、
height（当前画布的高）和
space（内边距）,需要返回code（请求状态码）、
token（唯一校验）、
width（假）、
height（假）和
抠图位置信息x，y的接口-->String;必传

url1-type：url1的http请求方式-->String;非必传;默认'get'*

* url2：向后台传参x（验证数据）、
time（验证时间）和
token（唯一校验）,需要返回code（请求状态码,123为拼接错误）、percentage（完成效率）和
result（完成后的唯一值）的接口-->String;必传

url2-type：url2的http请求方式-->String;非必传;默认'post'*

* v-model：v-model双向绑定数据-->String;非必传

show-btn：是否显示点击按钮-->Boolean;非必传;默认true*

w：显示按钮的宽-->String;非必传;默认'100%'*

h：显示按钮的高-->String;非必传;默认'100%'*

* img-list：拼图随机的图片路径列表-->Array;非必传;

* @change：触发验证监听-->第一个参数返回true/false，第二个参数返回验证加密码

2. 方法

* initPop：手动触发验证-->建议showBtn为false时使用

3.待开发

* url2时，传递用户的行为数据分析（前端获取，后端验证）