vue-puzzle-slider v2.0.0
滑动拼图(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;非必传;默认falsespace
:抠图到图形边沿的距离-->Number;非必传;默认10url1
:向后台传参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;非必传;默认truew
:显示按钮的宽-->String;非必传;默认'100%'h
:显示按钮的高-->String;非必传;默认'100%'img-list
:拼图随机的图片路径列表-->Array;非必传;@change
:触发验证监听-->第一个参数返回true/false,第二个参数返回验证加密码
2. 方法
initPop
:手动触发验证-->建议showBtn为false时使用
3.待开发
- url2时,传递用户的行为数据分析(前端获取,后端验证)
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago