Vue3使用vue3-puzzle-vcode進行滑動驗證

npm包地址：https://www.npmjs.com/package/vue3-puzzle-vcode

npm安裝

npm install vue3-puzzle-vcode --save

最簡單例子：

<template>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose"/>
    <button @click="onShow">開始驗證</button>
</template>

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

  const isShow = ref(false);

  const onShow = () => {
    isShow.value = true;
  };

  const onClose = () => {
    isShow.value = false;
  };

  const onSuccess = () => {
    onClose(); // 驗證成功，手動關閉模態框
  };
</script>

參數

字段	類型	默認值	說明
show	Boolean	false	是否顯示驗證碼彈框
type	String	"modal"	"modal"模態框形式 / "inside"內嵌形式
canvasWidth	Number	310	主圖區域的寬度，單位 px
canvasHeight	Number	160	主圖區域的高度，單位 px
puzzleScale	Number	1	拼圖塊(小的拼圖)的大小比例，0.2 ～ 2 ，數字越大，拼圖越大
sliderSize	Number	50	左下角用戶拖動的那個滑塊的尺寸，單位 px
range	Number	10	判斷成功的誤差範圍，單位 px, 滑動的距離和拼圖的距離小於等於此值時，會判定重合
imgs	Array	null	自定義圖片，見下方例子
successText	String	"驗證通過！"	驗證成功時的提示文字
failText	String	"驗證失敗，請重試"	驗證失敗時的提示文字
sliderText	String	"拖動滑塊完成拼圖"	下方滑動條裏的文字
className	String	""	給根元素一個class類用於自定義樣式
zIndex	Number	999	設置根元素一個層級z-index

事件

事件名	返回值	說明
success	偏差值	驗證通過時會觸發，返回值是用戶移動的距離跟目標距離的偏差值 px
fail	偏差值	驗證失敗時會觸發，返回值同上
close	null	用戶點擊遮罩層的回調
reset	null	用戶手動點擊右上角刷新按鈕時觸發的回調

內嵌形式

入參type="inside"， 將啓用內嵌模式 應該用一個元素包裹<Vcode />：

<template>
  <div class="box">
    <Vcode type="inside" :show="isShow" />
  </div>
</template>

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