欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

前言

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

接著我們?cè)?main.js 中引入。

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

二、使用

在使用之前我們先來(lái)看看它的一些屬性和回調(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)證不通過(guò)時(shí)的回調(diào)函數(shù)
refresh點(diǎn)擊刷新按鈕后的回調(diào)函數(shù)
again檢測(cè)到非人為操作滑動(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)容。下面我們?cè)囍鴣?lái)用代碼實(shí)現(xiàn)這個(gè)功能。

為了方便在項(xiàng)目中使用,我直接將其封裝成公共的組件,這樣無(wú)論在任何頁(yè)面都可以直接引入使用,如果需要修改配置,可通過(guò) propsemit 傳參修改在組件中寫死的屬性值。

封裝文件(子組件)

文件路徑: 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)證通過(guò),耗時(shí)" + (times / 1000).toFixed(1) + "s";
      // 成功后關(guān)閉彈框
      this.timer = setInterval(() => {
        this.isShowSlide = false;
      }, 1000);
    },
    // 驗(yàn)證不通過(guò)時(shí)的回調(diào)函數(shù)
    onFail() {
      this.$emit("failOn");
      console.log("驗(yàn)證不通過(guò)");
      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("刷新成功");
    },
    // 檢測(cè)到非人為操作滑動(dòng)時(shí)觸發(fā)的回調(diào)函數(shù)
    onAgain() {
      this.$emit("againOn");
      console.log("檢測(cè)到非人為操作的哦");
      // 刷新
      this.$refs.slideblock.reset();
    },
    // 父組件調(diào)用刷新方法(每次進(jìn)來(lái)重置組件)
    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ù)通過(guò)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)效果

在這里插入圖片描述

到此這篇關(guān)于vue 實(shí)現(xiàn)左滑圖片驗(yàn)證的文章就介紹到這了,更多相關(guān)vue 左滑圖片驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級(jí)傳值,vuex)

    uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級(jí)傳值,vuex)

    這篇文章主要介紹了uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級(jí)傳值,vuex),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作

    Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作

    這篇文章主要介紹了Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch

    vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch

    這篇文章主要介紹了vue組件實(shí)現(xiàn)首次加載就觸發(fā)watch方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue.js響應(yīng)式原理解析與實(shí)現(xiàn)

    vue.js響應(yīng)式原理解析與實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vue.js響應(yīng)式原理解析與實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-08-08
  • 前端之vue3使用WebSocket的詳細(xì)步驟

    前端之vue3使用WebSocket的詳細(xì)步驟

    websocket實(shí)現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • 詳解Vuex中mapState的具體用法

    詳解Vuex中mapState的具體用法

    本篇文章主要介紹了詳解Vuex中mapState的具體用法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • ?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫(kù)

    ?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫(kù)

    這篇文章主要介紹了?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫(kù),我們通過(guò)考慮其功能、工作原理以及如何開始使用它來(lái)了解?Vue?Demi,下面我們一起進(jìn)入文章學(xué)起來(lái)吧
    2022-02-02
  • 詳解Vue中AXIOS的封裝

    詳解Vue中AXIOS的封裝

    這篇文章主要為大家介紹了Vue中AXIOS的封裝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-01-01
  • Vue過(guò)濾器filters如何使用

    Vue過(guò)濾器filters如何使用

    Vue過(guò)濾器filters用于一些常見(jiàn)的文本格式化,通過(guò)過(guò)濾器可以進(jìn)行處理成自己想要展示出來(lái)的格式,由“管道”符號(hào)指示,本文給大家介紹Vue過(guò)濾器filters使用方式,感興趣的朋友一起看看吧
    2023-10-10
  • vue3中的reactive函數(shù)聲明數(shù)組方式

    vue3中的reactive函數(shù)聲明數(shù)組方式

    這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05

最新評(píng)論