vue3+Vite实现滑动拼图验证

news2024/11/18 15:46:05

参考文档：https://github.com/javaLuo/vue-puzzle-vcode/blob/master/README3.md

最近想学习一下这个前端滑动拼图的实现，就找了一个第三方库，该库支持vue2和vue3两个版本，直接看文档就能上手，我自己跑了一边倒，就当写了笔记吧

代码

<template>
  <div id="slider-verify">
    <Vcode
      ref="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, // 主图区域的宽度，单位 px
  canvasHeight: 160, // 主图区域的高度，单位 px  提示高度属性没有，没有具体找问题
  puzzleScale: 1, // 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大 这个比例比较舒服
  sliderSize: 50, // 左下角用户拖动的那个滑块的尺寸，单位 px
  range: 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>