参考文档：https://github.com/javaLuo/vue-puzzle-vcode/blob/master/README3.md
最近想学习一下这个前端滑动拼图的实现，就找了一个第三方库，该库支持vue2和vue3两个版本，直接看文档就能上手，我自己跑了一边倒，就当写了笔记吧
代码
<template><div id="slider-verify"><Vcoderef="vcodeRef":show="isShow":canvasWidth="sliderData.canvasWidth":puzzleScale="sliderData.puzzleScale":sliderSize="sliderData.sliderSize":range="sliderData.sliderSize":imgs="sliderData.imgs":successText="sliderData.successText":failText="sliderData.failText":sliderText="sliderData.sliderText"@success="sliderData.callBack.success"@fail="sliderData.callBack.fail"@close="sliderData.callBack.close"@reset="sliderData.callBack.reset"/></div>
</template><script lang="ts" setup>
import Vcode from 'vue3-puzzle-vcode'const isShow = ref(true)const imgs = ['/img1.webp', '/img2.webp', '/img3.jpg', '/img4.jpg']// "https://img1.baidu.com/it/u=1890390320,3399874998&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
// "https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
// "https://lmg.jj20.com/up/allimg/1113/052420110515/200524110515-1-1200.jpg",
// "https://lmg.jj20.com/up/allimg/1114/0G020114924/200G0114924-11-1200.jpg",const vcodeRef = ref(null)
const sliderData = ref({isShow: true, // 是否显示验证码弹框type: 'modal', // 内嵌模式，用不到canvasWidth: 310, // 主图区域的宽度，单位 pxcanvasHeight: 160, // 主图区域的高度，单位 px 提示高度属性没有，没有具体找问题puzzleScale: 1, // 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大 这个比例比较舒服sliderSize: 50, // 左下角用户拖动的那个滑块的尺寸，单位 pxrange: 10, // 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合 这个逻辑值得吐槽，感觉有点问题imgs: ['/img1.webp', '/img2.webp', '/img3.jpg', '/img4.jpg'], // 网上下载一些图片，放在public的公共目录下面引入即可successText: '验证成功',failText: '哎呀，还差一点！！！',sliderText: '拖拽我以完成校验',className: '', // 给渲染出的元素一个lcass name，用于后续调整样式callBack: {success() {console.log('验证成功！')vcodeRef.value.reset()// 正常情况直接调登陆接口就够了},fail() {console.log('验证失败！')},close() {console.log('你点击了遮罩！') // 一般是用来关闭这个月验证？？？？},reset() {console.log('重置成功！')},},
})
</script><style lang="scss" scoped>
#slider-verify {
}
</style>
效果
