File tree Expand file tree Collapse file tree 1 file changed +17
-9
lines changed
Filter options
Expand file tree Collapse file tree 1 file changed +17
-9
lines changed
Original file line number Diff line number Diff line change @@ -6,6 +6,14 @@ Vue 纯前端的拼图人机验证、右滑拼图验证<br/>
6
6
![ img] ( public/demo.gif )
7
7
8
8
9
+ ## 重要更新
10
+
11
+ 2020/03/16 v1.1.0 ** 事件名改变** <br />
12
+ ```
13
+ @onSuccess -> @success
14
+ @onClose -> @close
15
+ @onFail -> @fail
16
+ ```
9
17
### 安装
10
18
11
19
``` node
@@ -34,10 +42,10 @@ import Vcode from "vue-puzzle-vcode";
34
42
<div>
35
43
<Vcode
36
44
:show="isShow"
37
- @onSuccess="onSuccess "
38
- @onClose="onClose "
45
+ @success="success "
46
+ @close="close "
39
47
/>
40
- <button @click="onSubmit ">登录</button>
48
+ <button @click="submit ">登录</button>
41
49
</div>
42
50
</template>
43
51
@@ -53,15 +61,15 @@ import Vcode from "vue-puzzle-vcode";
53
61
Vcode
54
62
},
55
63
methods:{
56
- onSubmit (){
64
+ submit (){
57
65
this.isShow = true;
58
66
},
59
67
// 用户通过了验证
60
- onSuccess (msg){
68
+ success (msg){
61
69
this.isShow = false; // 通过验证后,需要手动隐藏模态框
62
70
},
63
71
// 用户点击遮罩层,应该关闭模态框
64
- onClose (){
72
+ close (){
65
73
this.isShow = false;
66
74
}
67
75
}
@@ -84,9 +92,9 @@ import Vcode from "vue-puzzle-vcode";
84
92
### 事件
85
93
| 事件名 | 返回值 | 说明 |
86
94
| --------- | ------ | ------------------------------------------------------------ |
87
- | onSuccess | 偏差值 | 验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px |
88
- | onFail | 偏差值 | 验证失败时会触发,返回值同上 |
89
- | onClose | null | 用户点击遮罩层的回调 |
95
+ | success | 偏差值 | 验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px |
96
+ | fail | 偏差值 | 验证失败时会触发,返回值同上 |
97
+ | close | null | 用户点击遮罩层的回调 |
90
98
91
99
### 自定义图片
92
100
You can’t perform that action at this time.
0 commit comments