From 1bbf97d4f68794ddc3d6fcb52789fb499dcc3717 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Thu, 2 Jun 2022 14:20:11 +0800 Subject: [PATCH 01/15] Update README3.md --- README3.md | 63 ++++++++++++++++++------------------------------------ 1 file changed, 21 insertions(+), 42 deletions(-) diff --git a/README3.md b/README3.md index 4847170..b8864a1 100644 --- a/README3.md +++ b/README3.md @@ -1,13 +1,11 @@ # vue3-puzzle-vcode [![npm](https://img.shields.io/npm/v/vue3-puzzle-vcode.svg)](https://www.npmjs.com/package/vue3-puzzle-vcode) [![npm downloads](https://img.shields.io/npm/dt/vue3-puzzle-vcode.svg)](https://www.npmjs.com/package/vue3-puzzle-vcode) -以下是在Vue3.x中使用的文档 - **DEMO**: https://isluo.com/work/vue-puzzle-vcode/ ![img](public/demo.gif) -### Vue3.x 安装 vue3-puzzle-vcode +### 安装 vue3-puzzle-vcode ```node npm install vue3-puzzle-vcode --save @@ -20,36 +18,23 @@ - ``` @@ -84,18 +69,12 @@ export default { ``` @@ -117,4 +96,4 @@ export default { 2021/10/12 - 1.0.1
- 修复：重复加载图片的问题 - 修复：png图片的透明部分现在会用白色填充 -- 更新：初始化时不再自动加载图片，直到show出来时再加载 \ No newline at end of file +- 更新：初始化时不再自动加载图片，直到show出来时再加载 From cae430d50fd9a126dd01c63a442395b769977783 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Thu, 2 Jun 2022 14:24:17 +0800 Subject: [PATCH 02/15] Update README3.md --- README3.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README3.md b/README3.md index b8864a1..ea00143 100644 --- a/README3.md +++ b/README3.md @@ -84,6 +84,10 @@ const imgs = [Img1, Img2]; - 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框 ### 更新日志 +2022/06/02 - 1.0.6
+- 更新：支持TypeScript +- 修复：修复了因vue版本不同导致的报错问题 +- 2021/10/18 - 1.0.4
- 修复：修复了在判定状态还未刷新时关闭模态框，重新打开不刷新的问题 From 89e3cdeba2281eb122ef1d3124dffa93909fd424 Mon Sep 17 00:00:00 2001 From: chenjing Date: Thu, 1 Dec 2022 17:41:42 +0800 Subject: [PATCH 03/15] =?UTF-8?q?fix:=20=E5=88=A4=E5=AE=9A=E4=B8=AD?= =?UTF-8?q?=E4=B8=8D=E6=89=A7=E8=A1=8C=E5=85=B3=E9=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.vue b/src/app.vue index 9d7f202..8652dd8 100644 --- a/src/app.vue +++ b/src/app.vue @@ -207,7 +207,7 @@ export default { methods: { // 关闭 onClose() { - if (!this.mouseDown) { + if (!this.mouseDown && !this.isSubmting) { clearTimeout(this.timer1); this.$emit("close"); } From 46b62bf56678e85eff59d7287337689ac0a8d4cf Mon Sep 17 00:00:00 2001 From: javaLuo <376693576@qq.com> Date: Thu, 1 Dec 2022 20:46:10 +0800 Subject: [PATCH 04/15] update 1.1.10 --- README.md | 3 +++ package.json | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 58da586..380b5ef 100644 --- a/README.md +++ b/README.md @@ -125,6 +125,9 @@ export default { - 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框 ### 更新日志 +2022/12/01 - 1.1.10
+- 修复：修复了一个在判定过程中关闭模态框导致reset失效的问题 + 2021/10/18 - 1.1.9
- 修复：修复了在判定状态还未刷新时关闭模态框，重新打开不刷新的问题 diff --git a/package.json b/package.json index 09c3333..32668bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-puzzle-vcode", - "version": "1.1.9", + "version": "1.1.10", "description": "vue 滑动拼图验证码", "main": "dist/main.js", "files": [ @@ -67,4 +67,4 @@ "> 1%", "not dead" ] -} +} \ No newline at end of file From 72c4fe5e6d0ebc8f829c4684fb9e5d0f640e837d Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Thu, 1 Dec 2022 21:15:17 +0800 Subject: [PATCH 05/15] Update README3.md --- README3.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README3.md b/README3.md index ea00143..84c1be0 100644 --- a/README3.md +++ b/README3.md @@ -84,6 +84,8 @@ const imgs = [Img1, Img2]; - 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框 ### 更新日志 +2022/12/01 - 1.0.7
+- 修复: 修复了一个在判定中关闭模态框可能会导致reset失效的问题 2022/06/02 - 1.0.6
- 更新：支持TypeScript - 修复：修复了因vue版本不同导致的报错问题 From 6391becf5f9c081cd6db3d3df7a01af6c777e31a Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Thu, 1 Dec 2022 21:15:45 +0800 Subject: [PATCH 06/15] Update README3.md --- README3.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README3.md b/README3.md index 84c1be0..7219084 100644 --- a/README3.md +++ b/README3.md @@ -86,10 +86,11 @@ const imgs = [Img1, Img2]; ### 更新日志 2022/12/01 - 1.0.7
- 修复: 修复了一个在判定中关闭模态框可能会导致reset失效的问题 + 2022/06/02 - 1.0.6
- 更新：支持TypeScript - 修复：修复了因vue版本不同导致的报错问题 -- + 2021/10/18 - 1.0.4
- 修复：修复了在判定状态还未刷新时关闭模态框，重新打开不刷新的问题 From 5137249fef1c14bd0d0d11b83e95e1428cdc9479 Mon Sep 17 00:00:00 2001 From: javaLuo <376693576@qq.com> Date: Mon, 24 Apr 2023 00:57:58 +0800 Subject: [PATCH 07/15] update --- README3.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README3.md b/README3.md index 7219084..ba084d2 100644 --- a/README3.md +++ b/README3.md @@ -52,6 +52,7 @@ | successText | String | "验证通过！" | 验证成功时的提示文字 | | failText | String | "验证失败，请重试" | 验证失败时的提示文字 | | sliderText | String | "拖动滑块完成拼图" | 下方滑动条里的文字 | +| className | String | "" | 给根元素一个class类用于自定义样式 | ### 事件 @@ -60,7 +61,7 @@ | success | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px | | fail | 偏差值 | 验证失败时会触发，返回值同上 | | close | null | 用户点击遮罩层的回调 | - +| reset | null | 用户手动点击右上角刷新按钮时的回调 | ### 自定义图片 ```vue From fb344886bdd9ef8400093fe6edc6830ed6a9e0d0 Mon Sep 17 00:00:00 2001 From: javaLuo <376693576@qq.com> Date: Wed, 19 Jul 2023 19:29:39 +0800 Subject: [PATCH 08/15] update --- README3.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README3.md b/README3.md index ba084d2..a926243 100644 --- a/README3.md +++ b/README3.md @@ -11,6 +11,14 @@ npm install vue3-puzzle-vcode --save ``` +### Nuxt3: 如果你使用Nuxt3框架，请安装以下Nuxt专用版本 +```node + npm install vue3-puzzle-vcode@1.0.15-nuxt --save +``` + +- 为什么要这样? +`Nuxt3`打包服务器端代码使用了`Nitro`库，这个库打包时不知为何无法识别相对路径的CSS代码，因此我为Nuxt3专门制作了一个版本
+以后每次发布新的版本时，都会同时发布一个专用于`Nuxt`的版本，后缀为`-nuxt`； ### 最简单例子 ```vue - ``` +### 内嵌模式 +```vue + + + +``` +内嵌模式下，需要自己处理容器样式。 + +### 手动刷新 +每当`:show="isShow"` isShow等于true时，会自动刷新一次内部状态
+你也可以手动刷新： +```vue + + + +``` + ### 说明 - 当不传递 imgs 字段或图片加载出错时，会自动生成随机图片 - 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框 +### Nuxt3: 如果你使用Nuxt3发现样式出现问题，请使用以下专用版本试试 +```node + npm install vue3-puzzle-vcode@1.1.5-nuxt --save +``` + +- 为什么要这样?
+`Nuxt3`打包服务器端代码使用了`Nitro`库，这个库打包时不知为何无法识别相对路径的CSS代码，因此为Nuxt3专门制作了一个版本
+以后每次发布新的版本时，都会同时发布一个专用于`Nuxt`的版本，后缀为`-nuxt`； + ### 更新日志 +2023/01/02 - 1.1.5
+- 新增: 内嵌模式 + 2022/12/01 - 1.0.7
- 修复: 修复了一个在判定中关闭模态框可能会导致reset失效的问题 From 6d77c914385a4d859769925c0884bf1d87d6c904 Mon Sep 17 00:00:00 2001 From: javaLuo <376693576@qq.com> Date: Wed, 3 Jan 2024 18:41:43 +0800 Subject: [PATCH 13/15] update --- README3.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README3.md b/README3.md index a62a9fc..fefca4e 100644 --- a/README3.md +++ b/README3.md @@ -124,6 +124,9 @@ const imgs = [Img1, Img2]; 以后每次发布新的版本时，都会同时发布一个专用于`Nuxt`的版本，后缀为`-nuxt`； ### 更新日志 +2023/01/03 - 1.1.6
+- 新增: 拼图块现在会呈现随机形状 + 2023/01/02 - 1.1.5
- 新增: 内嵌模式 From 31115655925094ee2a74257b891ec483516f0c45 Mon Sep 17 00:00:00 2001 From: javaLuo <376693576@qq.com> Date: Wed, 3 Jan 2024 18:48:53 +0800 Subject: [PATCH 14/15] update --- README3.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README3.md b/README3.md index fefca4e..162d837 100644 --- a/README3.md +++ b/README3.md @@ -116,7 +116,7 @@ const imgs = [Img1, Img2]; ### Nuxt3: 如果你使用Nuxt3发现样式出现问题，请使用以下专用版本试试 ```node - npm install vue3-puzzle-vcode@1.1.5-nuxt --save + npm install vue3-puzzle-vcode@1.1.6-nuxt --save ``` - 为什么要这样?
From c1aeff9b1ddeacc7fb34098f009b6435e633eea4 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Thu, 25 Jan 2024 22:20:11 +0800 Subject: [PATCH 15/15] update --- README3.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README3.md b/README3.md index 162d837..7c46628 100644 --- a/README3.md +++ b/README3.md @@ -64,6 +64,16 @@ | close | null | 用户点击遮罩层的回调 | | reset | null | 用户手动点击右上角刷新按钮时的回调 | +success事件 / fail事件 会返回两个参数 ： +```javascript + deviation: number, // 偏差值，用户滑动的位置 和 拼图缺口所在位置 的距离，单位px + obj: { + deviation: number, // 同 deviation + offsetX: number, // 用户滑动的距离，单位px + pinX: number, // 拼图缺口的所在位置（相对canvas的左边缘）， 单位px + } +``` + ### 自定义图片 ```vue