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)
blank

相关推荐

  • weblogic详解「建议收藏」

    weblogic详解「建议收藏」WebLogic中间件webspherejbossWebLogic介绍、安装1.1.1. 什么是中间件中间件(middleware)是基础软件的一大类,属于可复用软件的范畴.顾

  • 如何检查linux是否安装了php

    如何检查linux是否安装了php

    2021年10月18日
  • Eclipse乱码问题最全解决方案「建议收藏」

    Eclipse乱码问题最全解决方案「建议收藏」Windows>>Pereferences>>General>Editors>>Spelling>>Encoding选项下选择other,然后输入”UTF-8″随workspace编码改变,可以一个个选项设置,也可以直接设置workspace,但有的也默认是iso8859-1,仅仅设置workspace还不能解决问题将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,主要原因就是别人的I…

  • C语言三目运算符_c语言两个逗号表达式

    C语言三目运算符_c语言两个逗号表达式1、三目运算符三目运算符也叫条件运算符、三元运算符,是由一个问号和一个冒号组成。语法:表达式1?表达式2:表达式3;语义:先执行表达式1,如果表达式1的结果如果为真,那么执行表达式2,并且这个整体的运算式的结果是表达式2的结果;如果表达式1的结果如果为假,执行表达式3,运算式的结果是表达式3的结果。inta,b,c;a=7;b=6;c=(a>b)?a…

  • 更改conda源_conda install nb_conda

    更改conda源_conda install nb_conda更改conda源安装tensorflow过慢时,可以更改conda源安装tensorflow过慢时,可以更改conda源把一下代码直接复制到后端,按enter即可condaconfig–addchannelshttps://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/conda-forge/condaconfig–addchannelshttps://mirrors.tuna.tsinghua.edu.cn/anaconda/pkg

  • 如何使用Vue封装组件[通俗易懂]

    如何使用Vue封装组件[通俗易懂]首先了解一下封装组件的步骤:1.props:父传子2.事件(派发和监听)this.$emit()派发事件通过@或$on来监听事件3.slot(插槽),内容分发命名插槽<slotname=”命名插槽名”></slot>例如:<slotname=”ssl”></slot>使用:<divslot=”ssl”>…..</div>想封装组件呢首先要思考:1.你想向用户暴露哪些属性(

发表回复

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

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