快捷導(dǎo)航

vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能

更新時(shí)間：2023年04月03日 11:04:48 作者：水星記_

網(wǎng)頁中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式，這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下

前言

眾所周知，網(wǎng)頁中滑動(dòng)圖片驗(yàn)證一直是各大網(wǎng)站、移動(dòng)端的主流校驗(yàn)方式，其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式。從開發(fā)的角度來看要想實(shí)現(xiàn)這個(gè)功能還是需要一點(diǎn)時(shí)間的，但其實(shí)網(wǎng)上已經(jīng)有很多專門針對圖片滑動(dòng)驗(yàn)證功能的插件了，今天就給大家分享一款好用的插件 ----- 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);

二、使用

在使用之前我們先來看看它的一些屬性和回調(diào)函數(shù)。

屬性

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

回調(diào)函數(shù)

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

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

1. 指定 ref 的值

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

2. 調(diào)用

this.$refs.slideblock.reset();

以上是我們實(shí)現(xiàn)這個(gè)功能基本都會(huì)用到的一些配置，感興趣的同學(xué)可以去官網(wǎng)文檔查看更詳細(xì)的內(nèi)容。下面我們試著來用代碼實(shí)現(xiàn)這個(gè)功能。

為了方便在項(xiàng)目中使用，我直接將其封裝成公共的組件，這樣無論在任何頁面都可以直接引入使用，如果需要修改配置，可通過 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>安全驗(yàn)證</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="拖動(dòng)滑塊完成拼圖">
        </slide-verify>
        <!-- 耗時(shí) -->
        <div>{{timeDate}}</div>
      </div>
    </van-popup>
  </div>
</template>

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

組件內(nèi)使用（父組件）

<template>
  <div>
    <!-- 使用組件 -->
    <van-button @click="verifyOn" round color="linear-gradient(to right,#FE566D, #F83D2A)" type="primary" block>獲取驗(yàn)證碼</van-button>
    <!-- 如若想要修改其它參數(shù)通過props動(dòng)態(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: {
    // 點(diǎn)擊獲取驗(yàn)證碼按鈕
    verifyOn() {
      this.isShowSlide = true;
      // 每次點(diǎn)擊都觸發(fā)一下重置驗(yàn)證組件的方法
      this.$refs.parent.handleClick();
    },
  },
};
</script>

實(shí)現(xiàn)效果

在這里插入圖片描述