vue圖片滑動驗證

讀完這篇文章，可以掌握如何實現Vue的圖片滑動驗證，以及滑動驗證的自定義顯示的圖片背景

自定義圖片之后的滑動驗證背景

首先安裝插件支持（先簡要概述下組件參數的配置信息和配置位置）

npm install vue-puzzle-vcode

html代碼部分

<Vcode :show="isShow" @success="success"/>
其中@success是驗證成功之后的回調

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	用戶點擊遮罩層的回調

真實項目部分代碼，包含默認的驗證背景圖片和自定義的背景圖片代碼

使用到的十張圖片下載地址 https://files.cnblogs.com/files/nanstar/rePhoto.zip
組件的默認背景

//HTML部分
<!--圖片驗證碼部分-->
<!--默認背景圖片-->
<!--<Vcode :show="isShow" @success="success" @fail="fails" @close="closeRe"/>-->
<!--自定義本地圖片-->
<Vcode :imgs="[img1,img2,img3,img4,img5,img6,img7,img8,img9,img10]"
:show="isShow" @success="success" @fail="fails" @close="closeRe"/>
<!--圖片驗證碼部分-->

//JS部分
//引入和掛載
import Vcode from "vue-puzzle-vcode";
//自定義的時候使用了10張圖片（我將圖片下載到了本地項目內容，所以使用的是路徑引用）
import img1 from "../../../public/img/rePhoto/1.jpg";
    import img2 from "../../../public/img/rePhoto/2.jpg";
    import img3 from "../../../public/img/rePhoto/3.jpg";
    import img4 from "../../../public/img/rePhoto/4.jpg";
    import img5 from "../../../public/img/rePhoto/5.jpg";
    import img6 from "../../../public/img/rePhoto/6.jpg";
    import img7 from "../../../public/img/rePhoto/7.jpg";
    import img8 from "../../../public/img/rePhoto/8.jpg";
    import img9 from "../../../public/img/rePhoto/9.jpg";
    import img10 from "../../../public/img/rePhoto/10.jpg";
    
components: { Vcode },

//參數屬性設置
isShow: false, // 驗證碼模態框是否出現，
photoHua:0,//圖片滑動驗證的錯誤次數
  //自定義圖片的驗證部分（返回值部分）
                img1,
                img2,
                img3,
                img4,
                img5,
                img6,
                img7,
                img8,
                img9,
                img10,
 
// 成功的回調
 success(){
                this.isShow = false; // 通過驗證后，關閉圖片驗證彈出框，讓用戶繼續填寫驗證碼
                this.$notify.success({
                    title:"提示",
                    message:"請認證填寫驗證碼",
                    duration:5000
                })
                this.loginForm.recode = "";//設置驗證碼部分是空，若是用到項目不可以，請刪除這句代碼
            },
 //失敗的回調，失敗的邏輯是，用戶失敗指定次數之后，加入彈窗提示信息
 fails(){
            this.photoHua += 1;
            if(this.photoHua > 5){
            this.$message({
            message: '其實ψ(*｀ー´)ψ......你要是一直拼不成功，我會讓你一直拼下去的喲...',
            type: 'warning'
            });
            }

},

//點擊圖片驗證的背景部分事件
closeRe(){
                this.$message({
                    message: '請完成滑動驗證，驗證成功之后驗證框會自動消失...(๑╹◡╹)ﾉ',
                    type: 'warning'
                });
            },

本地圖片的路徑配置信息

驗證超過預定次數提示

點擊空白背景的提示

文章內容為樓主原創，代碼有不足之處，若有錯誤或疑問，可以留言探討