vue实现登录时滑块验证

本文实例为大家分享了vue实现登录时滑块验证的具体代码,供大家参考,具体内容如下

1.效果图

2. 新建 SliderCheck.vue组件

<template>
<!--  拖动验证-->
  <div class="slider-check-box">
    <div class="slider-check" :class="rangeStatus ? 'success' : ''">
      <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
      {{ rangeStatus ? successText : startText }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 成功之后的函数
    successFun: {
      type: Function
    },
    //成功图标
    successIcon: {
      type: String,
      default: 'el-icon-success'
    },
    //成功文字
    successText: {
      type: String,
      default: '验证成功'
    },
    //开始的图标
    startIcon: {
      type: String,
      default: 'el-icon-d-arrow-right'
    },
    //开始的文字
    startText: {
      type: String,
      default: '请拖住滑块,拖动到最右边'
    },
    //失败之后的函数
    errorFun: {
      type: Function
    },
    //或者用值来进行监听
    status: {
      type: String
    }
  },
  data() {
    return {
      disX: 0,
      rangeStatus: false
    }
  },
  methods: {
    //滑块移动
    rangeMove(e) {
      let ele = e.target
      let startX = e.clientX
      let eleWidth = ele.offsetWidth
      let parentWidth = ele.parentElement.offsetWidth
      let MaxX = parentWidth - eleWidth
      if (this.rangeStatus) {
        //不运行
        return false
      }
      document.onmousemove = e => {
        let endX = e.clientX
        this.disX = endX - startX
        if (this.disX <= 0) {
          this.disX = 0
        }
        if (this.disX >= MaxX - eleWidth) {
          //减去滑块的宽度,体验效果更好
          this.disX = MaxX
        }
        ele.style.transition = '.1s all'
        ele.style.transform = 'translateX(' + this.disX + 'px)'
        e.preventDefault()
      }
      document.onmouseup = () => {
        if (this.disX !== MaxX) {
          ele.style.transition = '.5s all'
          ele.style.transform = 'translateX(0)'
          //执行成功的函数
          this.errorFun && this.errorFun()
        } else {
          this.rangeStatus = true
          if (this.status) {
            this.$parent[this.status] = true
          }
          //执行成功的函数
          this.successFun && this.successFun()
        }
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$blue: #198eeb;
@mixin jc-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-check-box {
  .slider-check {
    background-color: #e9e9e9;
    position: relative;
    transition: 1s all;
    user-select: none;
    color: #585858;
    @include jc-flex;
    height: 40px;
    &.success {
      background-color: $blue;
      color: #fff;
      i {
        color: $blue;
      }
    }
    i {
      position: absolute;
      left: 0;
      width: 50px;
      height: 100%;
      color: $blue;
      background-color: #fff;
      border: 1px solid #d8d8d8;
      cursor: pointer;
      font-size: 24px;
      @include jc-flex;
    }
  }
}
</style>

3.在父组件index.vue注册使用

<template>
    <div>
        <SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck>
    </div>
</template>

<script>
import SliderCheck from '@/components/test/SliderCheck'
export default {
  name: "index",
  components:{
    SliderCheck,
  },
  data(){
    return {},
  methods:{
    // 滑块验证成功回调
    handleSuccessFun() {
      console.log('滑动成功')
    },
    // 滑块验证失败回调
    handleErrorFun() {
      console.log('滑动失败')
    }
  }
 
}
</script>

<style lang="scss" scoped>

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • VUE接入腾讯验证码功能(滑块验证)备忘

    最近在用VUE做个简单的用户系统,登录注册需要验证码,想找个那种拖动的,找geetest居然已经不面向小客户了(或者说只有收费套餐). 腾讯防水墙的验证码免费使用,有2000/小时的免费额度,对于小网站完全足够了,阿里应该也有,我看discuz有插件直接能用,但没找到入口 腾讯的在这,和腾讯云无关:https://007.qq.com/captcha/#/  申请api很简单,QQ登录,创建应用,ID和secretkey就出来了,直接在文档里展示,赞一个. vue有人做了封装了geetest+腾

  • Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

    vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前 拖动后 代码引用的css与js都是线上的 将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码 底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标移动事件 <!DOCTYPE html> <html> <head> <meta charset="

  • vue实现简单滑块验证

    本文实例为大家分享了Vue滑块验证的实现,代码如下 <template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmWords}}</div> <div ref="moveDiv" @mo

  • Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法

    简介: 滑块验证码相比于传统的图片验证码具有以下优点: 验证码的具体验证不需要服务端去验证,服务端只需要核验验证结果即可. 验证码的实现不需要我们去了解,也不需要我们去具体实现. 滑块验证码的安全程度相比于传统验证码高不少. ... 由于网络上和腾讯api文档中缺少关于vue3中组合式api怎么应用腾讯的滑块验证码,所以出此教程.本人也非vue大佬,对vue的理解也不过停留在初级使用的程度上,有错误之处,敬请指出. 开始: 首先,我们需要去腾讯云申请一个图形验证的api,使用场景中选择自己的使用

  • Vue集成阿里云做滑块验证的实践

    目录 前言 集成阿里云验证 前端需要什么 引入阿里云验证 封装一个验证组件 使用组件 思考 前言 滑块验证是比较常见的人机鉴别手段,但是自己做一时半会还真搞不出来,想想这玩意还挺难琢磨,怎么识别是否是人机呢?本文介绍Vue+阿里云验证做出这个小功能. 集成阿里云验证 前端需要什么 appkey scene 后端配合 引入阿里云验证 public/index.html <head>   <script src="https://g.alicdn.com/AWSC/AWSC/aws

  • vue实现移动滑块验证

    本文实例为大家分享了vue实现移动滑块验证的具体代码,供大家参考,具体内容如下 记录一下今天的学习内容 <div class="solidBox" :class="{'solidBox1': validation}">     <div @mousedown="solidStar" class="solid" :class="{'solid1': validation}"></

  • 使用konva和vue-konva库实现拖拽滑块验证功能

    1. 在vue项目中安装konva和vue-konva库 npm install konva vue-konva --save-dev 2. 引入vue-konva库 import VueKonva from 'vue-konva': Vue.use(VueKonva) 3. 创建单独的滑块验证组件 Captcha.vue,在相应的页面中引入使用即可 <template> <v-stage :config="Config.stage"> <v-layer

  • vue-cli 自定义指令directive 添加验证滑块示例

    vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考: 用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可: template: <template> <div> <div class="movebox" > <div class="movego"></div> <div class="txt&quo

  • vue实现登录时滑块验证

    本文实例为大家分享了vue实现登录时滑块验证的具体代码,供大家参考,具体内容如下 1.效果图 2. 新建 SliderCheck.vue组件 <template> <!--  拖动验证-->   <div class="slider-check-box">     <div class="slider-check" :class="rangeStatus ? 'success' : ''">    

  • Vue前端登录token信息验证功能实现

    用户在首次访问网站时,应在登录页面填写账号密码,前端携带用户信息向服务器请求. 1.服务器验证用户信息 验证失败:给前端响应数据 验证通过:对该用户创建token,并以响应数据返回给前端 2.前端接受后端响应的数据 错误信息:提示错误消息 正确信息:页面进行跳转至首页,同时保存token(可以保存在cookie或localstorage) 3.用户点击某功能模块的触发请求(比如某功能有权限设置或是是否需要token) 利用路由守卫beforeEach() 将保存的token添加至请求拦截器的请求

  • 使用selenium模拟登录解决滑块验证问题的实现

    本次主要是使用selenium模拟登录网页端的TX新闻,本来最开始是模拟请求的,但是某一天突然发现,部分账号需要经过滑块验证才能正常登录,如果还是模拟请求,需要的参数太多了,找的心累.不过好在TX的滑块验证是他们自己开发的,没有极验那么复杂,当然相反的,想要模拟就得自己去一点点探索了,毕竟对极验滑块的破解,网上已经可以找到现成的代码来用了.下面说一下模拟的实现过程和我遇见的问题. 1.登录入口 我是通过点击打开链接来当做登录入口的 部分代码实现: driver = webdriver.Chrom

  • Vue退出登录时清空缓存的实现

    如下所示: <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store.state.app.themeColor }; }, mount

  • vue实现登录时的图片验证码

    本文实例为大家分享了vue实现登录时的图片验证码的具体代码,供大家参考,具体内容如下 效果图 一.新建vue组件components/identify/identify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></c

  • vue实现登录时图形验证码

    本文实例为大家分享了vue实现登录时图形验证码的具体代码,供大家参考,具体内容如下 效果图: 点击图案可以切换字符 1.新建 Identify.vue 组件 <template>   <div>   <canvas       id="s-canvas"       :width="contentWidth"       :height="contentHeight"></canvas>   <

  • vue实现登录滑动拼图验证

    本文实例为大家分享了vue实现登录滑动拼图验证的具体代码,供大家参考,具体内容如下 一.安装插件 npm install --save vue-monoplasty-slide-verify 二.main.js引入 import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码 Vue.use(SlideVerify) 三.组件中使用 html(自定义关闭按钮,添加变量控制弹窗显隐) <!-- 拼图验证

  • Vue+Express实现登录状态权限验证的示例代码

    前提 对Vue全家桶有基本的认知. 用有node环境 了解express 另外本篇只是介绍登录状态的权限验证,以及登录,注销的前后端交互.具体流程(例如:前端布局,后端密码验证等).以后有时间再对这些边边角角进行补充 一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口 前端向后端敏感接口发送ajax 后端进行session验证,并返回信息 前端axios拦截返回信息,根据返回信息进行操作 进行页面切换 页面切换,触发vue-router的路由守卫 路由守卫根据跳转地址进行验证,如需权限,则

随机推荐