vue3滑动拼图

下载模块包：

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 = false
    console.log('验证通过' + msg)
    //通过验证跳转到home首页
    $router.push('/home')
  }
  //用户点击遮罩层，关闭模态框
  const close = () => {
    isShow.value = false
  }
  //用户验证失败
  const fail = () => {
    console.log('验证失败')
  }
  </script>
   
  <style lang="scss" scoped></style>

效果样式：

 

滑动登陆测试