眾所周知，網頁中滑動圖片驗證一直是各大網站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機器以及為了防止機器人程序暴力登錄或攻擊從而設置的一種安全保護方式。從開發(fā)的角度來看要想實現這個功能還是需要一點時間的，但其實網上已經有很多專門針對圖片滑動驗證功能的插件了，今天就給大家分享一款好用的插件 ----- vue-monoplasty-slide-verify。

一、安裝

使用 npm 安裝 vue-monoplasty-slide-verify 插件。

npm i vue-monoplasty-slide-verify --savve
cnpm i vue-monoplasty-slide-verify --savve //鏡像安裝

接著我們在 main.js 中引入。

import slideVerify from "vue-monoplasty-slide-verify";
Vue.use(slideVerify);

二、使用

在使用之前我們先來看看它的一些屬性和回調函數。

屬性

參數	描述
l	滑動碎片的大小
r	滑動碎片的圓角
w	畫布的寬
h	畫布的高
imgs	背景圖數組，默認值 []，為 [] 時隨機加載插件圖片
accuracy	滑動驗證的誤差范圍，默認值 5
show	是否顯示刷新按鈕，默認值 true

回調函數

函數名	描述
success	返回時間參數，單位為毫秒
fail	驗證不通過時的回調函數
refresh	點擊刷新按鈕后的回調函數
again	檢測到非人為操作滑動時觸發(fā)的回調函數
fulfilled	刷新成功之后的回調函數

在父組件里如果需要重置，可以在父組件中調用子組件 reset() 方法。

1. 指定 ref 的值

<slide-verify ref="slideblock" ></slide-verify>

2. 調用

this.$refs.slideblock.reset();

以上是我們實現這個功能基本都會用到的一些配置，感興趣的同學可以去官網文檔查看更詳細的內容。下面我們試著來用代碼實現這個功能。

為了方便在項目中使用，我直接將其封裝成公共的組件，這樣無論在任何頁面都可以直接引入使用，如果需要修改配置，可通過 props 和 emit 傳參修改在組件中寫死的屬性值。

封裝文件（子組件）

文件路徑： src/components/verification/index.vue

<template>
  <div>
    <!-- vant 彈框組件，也可自定義彈框 -->
    <van-popup v-model="isShowSlide" :visible.sync="isShowSlide" @close="$emit('update:dialogChild', false)">
      <div class="contantBox">
        <p>安全驗證</p>
        <slide-verify :l="canvas.l" :r="canvas.r" :w="canvas.w" :h="canvas.h" ref="slideblock" @again="onAgain" @fulfilled="onFulfilled"
          @success="onSuccess" @fail="onFail" @refresh="onRefresh" :accuracy="3" :imgs="imgs" slider-text="拖動滑塊完成拼圖">
        </slide-verify>
        <!-- 耗時 -->
        <div>{{timeDate}}</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeDate: "", //耗時
      canvas: {
        l: 28, //滑動碎片的大小
        r: 7, //滑動碎片的圓角
        w: 300, //畫布的寬
        h: 160, //畫布的高
      },
      isShowSlide: false, //彈框顯隱
      imgs: [
        require("@/assets/1.png"),
        require("@/assets/2.png"),
        require("@/assets/3.png"),
      ], //自定義的隨機圖片
      timer: null, //定時器
    };
  },
  props: {
    dialogChild: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    dialogChild: {
      handler(newName, oldName) {
        this.isShowSlide = newName;
      },
      deep: true,
    },
  },
  methods: {
    // 返回時間參數，單位為毫秒
    onSuccess(times) {
      this.$emit("successOn", times);
      this.timeDate = "驗證通過，耗時" + (times / 1000).toFixed(1) + "s";
      // 成功后關閉彈框
      this.timer = setInterval(() => {
        this.isShowSlide = false;
      }, 1000);
    },
    // 驗證不通過時的回調函數
    onFail() {
      this.$emit("failOn");
      console.log("驗證不通過");
      this.timeDate = "";
    },
    // 點擊刷新按鈕后的回調函數
    onRefresh() {
      this.$emit("refreshOn");
      console.log("點擊了刷新圖標");
      this.timeDate = "";
    },
    // 刷新成功之后的回調函數
    onFulfilled() {
      this.$emit("fulfilledOn");
      console.log("刷新成功");
    },
    // 檢測到非人為操作滑動時觸發(fā)的回調函數
    onAgain() {
      this.$emit("againOn");
      console.log("檢測到非人為操作的哦");
      // 刷新
      this.$refs.slideblock.reset();
    },
    // 父組件調用刷新方法（每次進來重置組件）
    handleClick() {
      this.$nextTick(() => {
        this.timeDate = "";
        clearInterval(this.timer);//清除定時器
        this.$refs.slideblock.reset();
      });
    },
  },
};
</script>
<style scoped>
p {
  display: flex;
  justify-content: center;
  font-size: 15px;
  margin: 8px 0px;
}
.contantBox {
  padding: 0px 8px 8px 8px;
}
</style>

組件內使用（父組件）

<template>
  <div>
    <!-- 使用組件 -->
    <van-button @click="verifyOn" round color="linear-gradient(to right,#FE566D, #F83D2A)" type="primary" block>獲取驗證碼</van-button>
    <!-- 如若想要修改其它參數通過props動態(tài)傳值即可 -->
    <verification ref="parent" :dialogChild.sync="isShowSlide" />
  </div>
</template>

<script>
// 引入組件
import verification from "@/components/verification";
export default {
  data() {
    return {
      isShowSlide: false,
    };
  },
  components: {
    verification,
  },
  methods: {
    // 點擊獲取驗證碼按鈕
    verifyOn() {
      this.isShowSlide = true;
      // 每次點擊都觸發(fā)一下重置驗證組件的方法
      this.$refs.parent.handleClick();
    },
  },
};
</script>

實現效果

在這里插入圖片描述