vue实现登录滑动拼图验证

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

一、安装插件

npm install --save vue-monoplasty-slide-verify

二、main.js引入

import SlideVerify from '../node_modules/vue-monoplasty-slide-verify' // 拼图验证码

Vue.use(SlideVerify)

三、组件中使用

html(自定义关闭按钮，添加变量控制弹窗显隐)

<!-- 拼图验证码 -->
<div v-show="flag" class="testCode">
  <p class="closeBtn"><i class="el-icon-close" @click="flag=!flag"></i></p>
  <slide-verify 
    :l="42"
    :r="20"
    :w="362"
    :h="140"
    slider-text="向右滑动"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :style="{width:'362px'}"
    class="slide-box"
    ref="slideBlock"
    v-show="flag"
  ></slide-verify>
</div>

js

return {
    msg: '',
    flag: false,
}
methods: {
    // 拼图成功
    onSuccess (){
      this.getLogin()
    },
    // 拼图失败
    onFail (){
      this.msg = ''
    },
    // 拼图刷新
    onRefresh (){
      this.msg = ''
    },
    // 登录请求接口
    getLogin () {
      const loginData = {
        account: '',
        phone: this.ruleForm.userName,
        // Password: sha3.sha3_256(md5(this.ruleForm.password)), // 加密
        password: this.ruleForm.password,
        email: '',
        accountType: 2, // 登录类型手机号
        checkCode: ''
      }
      // 接口
      userLogin(loginData)
        .then(res => {
          console.log(res)
        })
        .catch(res => {
          console.log(res)
        })
    },
    // 点击登录校验-拼图出现
    submitForm (formName) {
      // 表单校验
      this.$refs[formName].validate((valid) => {
        // 验证通过
        if (valid) {
          // 拼图出现
          this.flag = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
}

四、效果

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

赞 (0)

相关推荐

  • vue router+vuex实现首页登录验证判断逻辑

    首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页.登录成功后,跳转到前一个页面. 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next . to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子. 下面以工作中写的一个判断为为例子: router.beforeEach(async (to, from, next) => {

  • vue登录注册及token验证实现代码

    在大多数网站中,实现登录注册都是结合本地存储cookie.localStorage和请求时验证token等技术.而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框. 而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为. 具体实现代码如下: 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from 'v

  • 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求.对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 先来摘抄一段文档中beforeRou

  • Vue中登录验证成功后保存token,并每次请求携带并验证token操作

    在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage), 下面介绍用localStorage来存储: 在登录请求成功后,会返回一个token值,用loaclStorage保存 localStorage.setItem('token',res.data.token) 在main.js中设置全局请求头和响应回来的判断 //设置axios请求头加入toke

  • vue 登录滑动验证实现代码

    vue 登录滑动验证实现代码

    在没给大家讲解实现代码之前,先给大家分享效果图: 之前别人都是用jq写的,自己整理了一下开始使用 <el-form-item label="验证"> <div class="form-inline-input"> <div class="code-box" id="code-box"> <input type="text" name="code"

  • vuex + axios 做登录验证 并且保存登录状态的实例

    还是那句话,网上找个完整的博客真的难,实现效果全靠摸索啊 第一步:安装axios .vuex npm i -s axios npm i -s vuex 执行这两句 ,vue等环境搭建就不废话了 第二步:配置main.js文件 上图不上码,菊花万人捅,附上代码 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.

  • Vue 实现登录界面验证码功能

    Vue 实现登录界面验证码功能

    登录界面 SIdentify 创建验证码组件,实现绘画出图片验证码 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • Vue中的验证登录状态的实现方法

    Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息

  • vue实现登录页面的验证码以及验证过程解析(面向新手)

    vue实现登录页面的验证码以及验证过程解析(面向新手)

    做成之后就 是这个样子 接下来上代码 创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>

  • Vue实战之vue登录验证的实现代码

    最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手--好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)--- 我做的这个产品是课堂在线编程教学工具,由于涉及到商业问题,这里就不能和大家分享了,但是我可以把里面我认为很牛(zhuang)X(bi)的技术和大家分享分享啊. 如果你觉得我写的很 low的话欢迎加入igeekbar裙里来喷我啊,我在那里等你

随机推荐