vue3滑块验证

1.下载依赖 

npm install vue3-puzzle-vcode --save

2.组件引入依赖写入对应api

<template>
  <div class="slider-verify-container">
    <el-button type="primary" @click="onShow">开始验证</el-button>
    <Vcode  :imgs="imgs" :show="isShow" @close="onClose" @fail="onFail" @success="onSuccess" />
  </div>
</template>
<script lang="ts" setup>
import Vcode from 'vue3-puzzle-vcode'
defineOptions({
  name: 'Vcode ',
})
const isShow = ref<any>(false)
const imgs = ref<any>([img1, img2,...很多张图片])
const onShow = () => {
  isShow.value = true
}
const onClose = () => {
  isShow.value = false
}
const onSuccess = () => {
   console.log('验证成功')
   onClose()
}
const onFail = () => {
   console.log('验证失败，请重试')
}
</script>

3.效果图