File tree 1 file changed +49
-4
lines changed
Filter options
1 file changed +49
-4
lines changed
Original file line number Diff line number Diff line change @@ -44,7 +44,7 @@ import Vcode from "vue-puzzle-vcode";
44
44
<template>
45
45
<div>
46
46
<Vcode :show="isShow" @success="success" @close="close" />
47
- <button @click="submit">登录 </button>
47
+ <button @click="submit">开始验证 </button>
48
48
</div>
49
49
</template>
50
50
@@ -65,7 +65,7 @@ export default {
65
65
},
66
66
// 用户通过了验证
67
67
success(msg) {
68
- this.isShow = false; // 通过验证后,需要手动隐藏模态框
68
+ this.isShow = false; // 通过验证后,需要手动关闭模态框
69
69
},
70
70
// 用户点击遮罩层,应该关闭模态框
71
71
close() {
@@ -129,6 +129,51 @@ export default {
129
129
- 当不传递 imgs 字段或图片加载出错时,会自动生成随机图片
130
130
- 模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要手动隐藏模态框
131
131
132
- ### 更新日志
132
+ ## 使用 Vue3.0
133
133
134
- ** 1.1.5 2021/02/09** 把所有package包更新到最新,减小代码体积。 (目前不支持vue3.0, 会报错, 等vue3.0正式发布时再改)
134
+ ### 安装 vue3-puzzle-vcode
135
+ ``` node
136
+ npm install vue3- puzzle- vcode -- save
137
+ ```
138
+
139
+ ### 最简单例子
140
+ ``` vue
141
+ <template>
142
+ <button @click="onShow">开始验证</button>
143
+ <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
144
+ </template>
145
+
146
+ <script>
147
+ import { ref } from "vue";
148
+ import Vcode from "vue3-puzzle-vcode";
149
+ export default {
150
+ components:{
151
+ Vcode
152
+ },
153
+ setup() {
154
+ const isShow = ref(false);
155
+
156
+ const onShow = () => {
157
+ isShow.value = true;
158
+ };
159
+
160
+ const onClose = () => {
161
+ isShow.value = false;
162
+ };
163
+
164
+ const onSuccess = () => {
165
+ onClose(); // 验证成功,需要手动关闭模态框
166
+ };
167
+
168
+ return {
169
+ isShow,
170
+ onShow,
171
+ onClose,
172
+ onSuccess
173
+ };
174
+ }
175
+ };
176
+ </script>
177
+ ```
178
+
179
+ - 其他都更vue2.0一样
You can’t perform that action at this time.
0 commit comments