@@ -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