滑动拼图（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时，传递用户的行为数据分析（前端获取，后端验证）