https://www.npmjs.com/package/vue3-puzzle-vcode
npm install vue3-puzzle-vcode --save
最简单例子
<template>
<Vcode :show="isShow" @success="onSuccess" @close="onClose"/>
<button @click="onShow">开始验证</button>
</template>
<script setup>
import { ref } from "vue";
import Vcode from "vue3-puzzle-vcode";
const isShow = ref(false);
const onShow = () => {
isShow.value = true;
};
const onClose = () => {
isShow.value = false;
};
const onSuccess = () => {
onClose(); // 验证成功，手动关闭模态框
};
</script>
内嵌形式
<template>
<div class="box">
<Vcode type="inside" :show="isShow" />
</div>
</template>
<style>
.box{
position: relative;
width: 320px;
height: auto;
}
</style>
企业微信截图_17321794491960.png
企业微信截图_17321794588127.png
