vue实现图片滑动验证功能——功能实现

今天药忘吃喽~ 2022-08-31 15:12 478阅读 0赞

图片滑动验证，是目前比较常见的验证方式，主要目的是防止用户利用机器人自动注册、登录、灌水。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
目前`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`中使用组件

对应的`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);
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/6ed7be0950b644399ced80b70a343097.png