Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit dc20979

Browse filesBrowse files
committed
update vue 3
1 parent bd25119 commit dc20979
Copy full SHA for dc20979

File tree

1 file changed

+49
-4
lines changed
Filter options

1 file changed

+49
-4
lines changed

‎README.md

Copy file name to clipboardExpand all lines: README.md
+49-4
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import Vcode from "vue-puzzle-vcode";
4444
<template>
4545
<div>
4646
<Vcode :show="isShow" @success="success" @close="close" />
47-
<button @click="submit">登录</button>
47+
<button @click="submit">开始验证</button>
4848
</div>
4949
</template>
5050
@@ -65,7 +65,7 @@ export default {
6565
},
6666
// 用户通过了验证
6767
success(msg) {
68-
this.isShow = false; // 通过验证后,需要手动隐藏模态框
68+
this.isShow = false; // 通过验证后,需要手动关闭模态框
6969
},
7070
// 用户点击遮罩层,应该关闭模态框
7171
close() {
@@ -129,6 +129,51 @@ export default {
129129
- 当不传递 imgs 字段或图片加载出错时,会自动生成随机图片
130130
- 模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要手动隐藏模态框
131131

132-
### 更新日志
132+
## 使用 Vue3.0
133133

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一样

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.