vue拼圖驗證（vue-puzzle-vcode）

首先安裝依賴

npm install vue-puzzle-vcode --save

使用

html：

<Vcode :show="isShow" @success="onSuccess"/>

js:

import Vcode from "vue-puzzle-vcode";
  export default {
    data(){
      return {
        isShow: false, // 驗證碼模態框是否出現
      }
    },
    components:{
      Vcode
    },
    methods:{// 用戶通過了驗證
      success(){
        this.isShow = false; // 通過驗證后，需要手動隱藏模態框
      },
    }
  }

參數

字段	類型	默認值	說明
show	Boolean	false	是否顯示驗證碼彈框
canvasWidth	Number	310	主圖區域的寬度
canvasHeight	Number	160	主圖區域的高度
imgs	Array	null	自定義圖片，見下方例子
successText	String	"驗證通過！"	驗證成功時的提示文字
failText	String	"驗證失敗，請重試"	驗證失敗時的提示文字
sliderText	String	"拖動滑塊完成拼圖"	下方滑動條里的文字

事件

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

自定義圖片

<template>
  <Vcode :imgs="[Img1, Img2]" />
</template>

<script>
import Img1 from '~/assets/img1.png';
import Img2 from '~/assets/img2.png';
 
export default {
  data(){
    return {
      Img1,
      Img2
    }
  }
}
</script>