下载模块包：

npm install vue3-puzzle-vcode --save

使用此代码前先安装，element-plus，vue-router，less等模块

<template><div><el-button type="primary" @click="login">登录</el-button><!-- img是自定义的背景图，没有使用默认图片 --><Vcode :show="isShow" @success="success" @close="close" @fail="fail" :imgs="[Img1,Img2,Img3,Img4,Img5,Img6]"></Vcode></div></template>

功能部分 

 <script setup>//自定义背景图，自己准备一张图片，引入即可import Img1 from '../../assets/yz1.jpg'import Img2 from '../../assets/yz2.jpg'import Img3 from '../../assets/yz3.jpg'import Img4 from '../../assets/yz4.jpg'import Img5 from '../../assets/yz5.jpg'import Img6 from '../../assets/yz6.jpg'//引入'vue3-puzzle-vcode'插件import Vcode from 'vue3-puzzle-vcode'import { ref } from 'vue'//引入路由import { useRouter } from 'vue-router'//获取路由器let $router = useRouter()//验证码模态框是否出现，默认不展示const isShow = ref(false)//登录按钮const login = () => {//展现验证码模态框isShow.value = true}//用户通过了验证const success = (msg) => {isShow.value = falseconsole.log('验证通过' + msg)//通过验证跳转到home首页$router.push('/home')}//用户点击遮罩层，关闭模态框const close = () => {isShow.value = false}//用户验证失败const fail = () => {console.log('验证失败')}</script><style lang="scss" scoped></style>

效果样式：