vue实现图片滑动验证功能——功能实现「建议收藏」

图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册、登录、灌水。目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了。具体使用方式如下:1.安装插件——npminstall–savevue-monoplasty-slide-verify注意此处的–save也就是简化版的-s,是为了将下载的插件保存到package.json中的depencedies中,这样其他人在下载你的项目后,依然可以通过npminstall将插件安装到node_modules.2

大家好,又见面了,我是你们的朋友全栈君。

图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册、登录、灌水。
在这里插入图片描述
目前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);
},
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/129320.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java创建二维数组

    Java创建二维数组1、Java创建二维数组:int[][]array=newint[6][6];2、直接创建二维数组并赋值:int[][]array={{1,2,3},{1,2,3},{1,2,3}};3、二维数组的声明:先声明再分配内存数组声明:数据类型数组名[][];…

  • java json对象和json字符串互转的方法_java json转字符串

    java json对象和json字符串互转的方法_java json转字符串java对象和JSON字符串互转

  • pycharm 激活码 2021【2021.10最新】

    (pycharm 激活码 2021)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~2JTX0APX6F-eyJsaWNlbnNlSWQiOi…

  • 如何判断二极管的极性_二极管的反向饱和电流

    如何判断二极管的极性_二极管的反向饱和电流三极管饱和状态的判断比如上图如何判断电路正常状态下(麦克风无声音)Q1饱和而不是Q2饱和?首先看Q1:因为R2=100R3所以电流的话R3是100倍的R2,但是8050放大系数是200倍以上,说明此时三极管已经无力再放大这个基极电流了,三极管处于饱和状态而后边Q2R3是R4的30倍左右,很明显电流的话根本就用不上HFE放大系统,处于截止状态…

  • Linux下干净卸载mysql详解

    Linux下干净卸载mysql详解1、使用以下命令查看当前安装mysql情况rpm-qa|grep-imysql可以看到如下图的所示:显示之前安装了:MySQL-client-5.5.25a-1.rhel5MySQL-server-5.5.25a-1.rhel52、停止mysql服务、删除之前安装的mysql删除命令:rpm-e–nodeps包名rpm-evMySQL

  • 从零开始学习Prometheus监控报警系统[通俗易懂]

    从零开始学习Prometheus监控报警系统[通俗易懂]Prometheus是一个开源的监控报警系统,它被纳入了由谷歌发起的Linux基金会旗下的云原生基金会,并成为仅次于Kubernetes的第二大开源项目。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号