11# 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 )
22
3- 以下是在Vue3.x中使用的文档
4- 53** DEMO** : https://isluo.com/work/vue-puzzle-vcode/
64
75![ img] ( public/demo.gif )
86
97
10- ### Vue3.x 安装 vue3-puzzle-vcode
8+ ### 安装 vue3-puzzle-vcode
119
1210``` node
1311 npm install vue3- puzzle- vcode -- save
2018 <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
2119</template>
2220
23- <script>
24- import { ref } from "vue";
25- import Vcode from "vue3-puzzle-vcode";
26- export default {
27- components:{
28- Vcode
29- },
30- setup() {
31- const isShow = ref(false);
32-
33- const onShow = () => {
34- isShow.value = true;
35- };
36-
37- const onClose = () => {
38- isShow.value = false;
39- };
40-
41- const onSuccess = () => {
42- onClose(); // 验证成功,需要手动关闭模态框
43- };
44-
45- return {
46- isShow,
47- onShow,
48- onClose,
49- onSuccess
50- };
51- }
52- };
21+ <script setup>
22+ import { ref } from "vue";
23+ import Vcode from "vue3-puzzle-vcode";
24+
25+ const isShow = ref(false);
26+
27+ const onShow = () => {
28+ isShow.value = true;
29+ };
30+
31+ const onClose = () => {
32+ isShow.value = false;
33+ };
34+
35+ const onSuccess = () => {
36+ onClose(); // 验证成功,需要手动关闭模态框
37+ };
5338</script>
5439```
5540
@@ -84,18 +69,12 @@ export default {
8469</template>
8570
8671<script>
72+ import Vcode from "vue3-puzzle-vcode";
8773import Img1 from "~/assets/img1.png";
8874import Img2 from "~/assets/img2.png";
8975
90- export default {
91- setup(){
92- const imgs = [Img1, Img2];
76+ const imgs = [Img1, Img2];
9377
94- return {
95- imgs
96- }
97- }
98- };
9978</script>
10079```
10180
@@ -117,4 +96,4 @@ export default {
117962021年10月12日 - 1.0.1<br />
11897- 修复:重复加载图片的问题
11998- 修复:png图片的透明部分现在会用白色填充
120- - 更新:初始化时不再自动加载图片,直到show出来时再加载
99+ - 更新:初始化时不再自动加载图片,直到show出来时再加载
0 commit comments