Vue3 轻量安全滑动拼图验证码：vue-sliding-puzzle 上手全攻略

npm install vue-sliding-puzzle --save

<template>
  <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
  <button @click="onShow">开始验证</button>
</template>

<script setup>
import { ref } from "vue";
import Vcode from "vue-sliding-puzzle";

const isShow = ref(false);
// 打开验证
const onShow = () => isShow.value = true;
// 关闭弹窗
const onClose = () => isShow.value = false;
// 验证成功
const onSuccess = () => onClose();
</script>

<template>
  <Vcode
    :show="isShow"
    @success="onSuccess"
    @close="onClose"
    :slider-text="'请拖动滑块完成验证'"
    :success-text="'验证通过'"
    :interference-diagram-count="3"
  />
  <button @click="onShow">开始验证</button>
</template>

<script setup>
import { ref } from "vue";
import Vcode from "vue-sliding-puzzle";

const isShow = ref(false);
const onShow = () => isShow.value = true;
const onClose = () => isShow.value = false;
const onSuccess = (deviation, obj) => {
  console.log("偏差：", deviation);
  console.log("耗时(ms)：", obj.duration);
  onClose();
};
</script>

<template>
  <div class="verify-box">
    <Vcode type="inside" :show="true" />
  </div>
</template>

<style>
.verify-box {
  position: relative;
  width: 320px;
  height: auto;
}
</style>