vue怎么實現圖片滑動驗證功能

這篇文章主要介紹“vue怎么實現圖片滑動驗證功能”，在日常操作中，相信很多人在vue怎么實現圖片滑動驗證功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么實現圖片滑動驗證功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

圖片滑動驗證，是目前比較常見的驗證方式，主要目的是防止用戶利用機器人自動注冊、登錄、灌水。

目前vue技術日趨成熟，已經有專門針對圖片滑動驗證功能的插件了。具體使用方式如下：

1.安裝插件——npm install --save vue-monoplasty-slide-verify

注意此處的--save也就是簡化版的-s，是為了將下載的插件保存到package.json中的depencedies中，這樣其他人在下載你的項目后，依然可以通過npm install將插件安裝到node_modules.

2.在main.js中引入插件并綁定到vue上

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
 
Vue.use(SlideVerify);

3.封裝圖片驗證組件

<template>
  <slide-verify
    :l="42"
    :r="10"
    :w="310"
    :h="155"
    :imgs="picArray"
    :show="false"
    slider-text="向右滑動完成驗證"
    ref="slideverify"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
  ></slide-verify>
</template>

<script>
export default {
  name: "SliderVerify",
  data() {
    return {
      //在data中引入`assets`中的圖片可以通過`require`的方式來引入
      picArray: [
        require("@/assets/verify/1.jpg"),
        require("@/assets/verify/2.jpg"),
        require("@/assets/verify/3.jpg"),
        require("@/assets/verify/4.jpg"),
        require("@/assets/verify/5.jpg"),
        require("@/assets/verify/6.jpg"),
        require("@/assets/verify/7.jpg"),
        require("@/assets/verify/8.jpg"),
      ],
    };
  },
  methods: {
    onSuccess() {//往父級傳遞驗證通過的函數
      this.$emit("success");
    },
    onReset() {//重置圖片驗證組件
      this.$refs.slideverify.reset();
    },
    onFail() {},
    onRefresh() {},
  },
};
</script>

4.父組件使用圖片驗證組件

import SlideVerify from "@/components/SlideVerify";//引入

export default {
  name: "Redister",
  components: {
    SlideVerify,//注冊組件
  },
  data(){
      return{
          isShowSlide:false
      }
  }
}

在html中使用組件

<div class="slideverify" v-show="isShowSlide" @mouseleave="hideSlide">
  <SlideVerify ref="slideblock" @success="sendSmsCode"></SlideVerify>
</div>

對應的js部分：

hideSlide() {
  setTimeout(() => {
    this.isShowSlide = false;
  }, 500);
},
sendSmsCode() {
    //此處的處理是：圖片驗證通過后，發送短信驗證碼，這個要根據具體情況單獨處理
  setTimeout(() => {
    this.$api
      .getSendForgetSmsCode({
        mobile: this.form.account,
      })
      .then((res) => {
        this.isShowSlide = false;
        if (res.data.success) {
          this.timeCountDown();
          this.$message.success("短信驗證碼發送成功");
        } else {
          this.$message.error(res.data);
        }
      })
      .catch((err) => {});
  }, 500);
},

到此，關于“vue怎么實現圖片滑動驗證功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！