update

Author: javaLuo

README.md

@@ -8,6 +8,10 @@ Vue 纯前端的拼图人机验证、右滑拼图验证<br/> 我知道有第 3 
 ![img](public/demo.gif)
 
 
+> 以下为Vue2.x使用文档
+> [Vue3.x的使用文档在这](README3.md)
+
+
 ### 安装
 
 ```node
@@ -29,7 +33,7 @@ import Vcode from "vue-puzzle-vcode";
 到自己的项目里，给`app.vue`随便改个名字，就是个普通 vue 组件，直接用即可。<br/>
 `src/assets`里是一张小图片，`app.vue`中有引用，注意自己匹配一下引用路径
 
-### Vue2.0 最简单例子
+### 最简单例子
 
 ```vue
 <template>
@@ -116,83 +120,6 @@ export default {
   域的图片
 
 
-<br/><br/>
----
-
-# 使用 Vue3.0
-<br/>
-
-### 安装 vue3-puzzle-vcode
-```node
-  npm install vue3-puzzle-vcode --save
-```
-
-### Vue3.0 最简单例子
-```vue
-<template>
-    <button @click="onShow">开始验证</button>
-    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
-</template>
-
-<script>
-import { ref } from "vue";
-import Vcode from "vue3-puzzle-vcode";
-export default {
-  components:{
-    Vcode
-  },
-  setup() {
-    const isShow = ref(false);
-
-    const onShow = () => {
-      isShow.value = true;
-    };
-
-    const onClose = () => {
-      isShow.value = false;
-    };
-
-    const onSuccess = () => {
-      onClose(); // 验证成功，需要手动关闭模态框
-    };
-
-    return {
-      isShow,
-      onShow,
-      onClose,
-      onSuccess
-    };
-  }
-};
-</script>
-```
-
-### Vue3.0 自定义图片
-```vue
-<template>
-  <Vcode :imgs="imgs" />
-</template>
-
-<script>
-import Img1 from "~/assets/img1.png";
-import Img2 from "~/assets/img2.png";
-
-export default {
-  setup(){
-    const imgs = [Img1, Img2];
-
-    return {
-      imgs
-    }
-  }
-};
-</script>
-```
-- 其他参数/事件都跟vue2.0一样
-
-### Vue3.0源代码
-<a href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3" target="_blank">https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3</a>
-
 ### 说明
 
 - 当不传递 imgs 字段或图片加载出错时，会自动生成随机图片

README3.md

@@ -0,0 +1,113 @@
+# 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.0中使用的文档
+
+**DEMO**: https://isluo.com/work/vue-puzzle-vcode/
+
+![img](public/demo.gif)
+
+
+### Vue3.x 安装 vue3-puzzle-vcode
+
+```node
+  npm install vue3-puzzle-vcode --save
+```
+
+### 使用
+
+```vue
+import Vcode from "vue3-puzzle-vcode";
+
+<Vcode :show="isShow" @success="onSuccess" @close="onClose" />
+```
+
+### 最简单例子
+```vue
+<template>
+    <button @click="onShow">开始验证</button>
+    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
+</template>
+
+<script>
+import { ref } from "vue";
+import Vcode from "vue3-puzzle-vcode";
+export default {
+  components:{
+    Vcode
+  },
+  setup() {
+    const isShow = ref(false);
+
+    const onShow = () => {
+      isShow.value = true;
+    };
+
+    const onClose = () => {
+      isShow.value = false;
+    };
+
+    const onSuccess = () => {
+      onClose(); // 验证成功，需要手动关闭模态框
+    };
+
+    return {
+      isShow,
+      onShow,
+      onClose,
+      onSuccess
+    };
+  }
+};
+</script>
+```
+
+### 参数
+
+| 字段         | 类型    | 默认值             | 说明                                                                          |
+| ------------ | ------- | ------------------ | ----------------------------------------------------------------------------- |
+| show         | Boolean | false              | 是否显示验证码弹框                                                            |
+| canvasWidth  | Number  | 310                | 主图区域的宽度，单位 px                                                       |
+| canvasHeight | Number  | 160                | 主图区域的高度，单位 px                                                       |
+| puzzleScale  | Number  | 1                  | 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大                     |
+| sliderSize   | Number  | 50                 | 左下角用户拖动的那个滑块的尺寸，单位 px                                       |
+| range        | Number  | 10                 | 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合 |
+| imgs         | Array   | null               | 自定义图片，见下方例子                                                        |
+| successText  | String  | "验证通过！"       | 验证成功时的提示文字                                                          |
+| failText     | String  | "验证失败，请重试" | 验证失败时的提示文字                                                          |
+| sliderText   | String  | "拖动滑块完成拼图" | 下方滑动条里的文字                                                            |
+
+### 事件
+
+| 事件名  | 返回值 | 说明                                                          |
+| ------- | ------ | ------------------------------------------------------------- |
+| success | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px |
+| fail    | 偏差值 | 验证失败时会触发，返回值同上                                  |
+| close   | null   | 用户点击遮罩层的回调                                          |
+
+
+### 自定义图片
+```vue
+<template>
+  <Vcode :imgs="imgs" />
+</template>
+
+<script>
+import Img1 from "~/assets/img1.png";
+import Img2 from "~/assets/img2.png";
+
+export default {
+  setup(){
+    const imgs = [Img1, Img2];
+
+    return {
+      imgs
+    }
+  }
+};
+</script>
+```
+
+### 说明
+
+- 当不传递 imgs 字段或图片加载出错时，会自动生成随机图片
+- 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框