1. 介绍

1.1 简介

基于滑动式的验证码，免于字母验证码的繁琐输入 用于网页注册或者登录

1.2 来源说明

vue使用滑块验证功能，是基于vue-monoplasty-slide-verify这样的一个开源项目，进行实现的，这是这个开源项目的网址传送阵： vue-monoplasty-slide-verify

1.3 效果图

vue——滑块验证_ide

2. vue实现步骤

2.1 在项目终端安装插件

npm i vue-monoplasty-slide-verify -S

此时，打开你的vue项目中package.json，如果出现下图所示，就说明安装成功vue——滑块验证_插入图片_02
如图所示，我的这个插件的版本是 @1.3.1的

2.2 main.js中导入并使用

在main.js中，粘贴下面代码即可

import SlideVerify from 'vue-monoplasty-slide-verify'
Vue.use(SlideVerify)
  • 1.
  • 2.

2.3 在login.vue中进行操作

在<template></template>写下列代码：

<el-card class="cover"><slide-verify:l="42":r="10":w="310":h="155"slider-text="向右滑动"@success="onSuccess"@fail="onFail"@refresh="onRefresh"></slide-verify></el-card>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

在<style></style>写下列代码：

.cover{width: fit-content;background-color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1000;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

在<script></script>写下列代码：

data(){return{loginAdmin:{}}},
methods:{onSuccess() {   //滑块验证通过之后触发的this.$notify.success("登录成功")this.$router.push('/')},onFail() {},onRefresh() {}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

代码理解：

里面的onSuccess()，onFail()， onRefresh() 这几个方法，都是这个开源插件自带的方法：onSuccess代表成功之后触发的，onFail代表失败之后触发的，onRefresh代表刷新

下列为滑快验证的属性：

vue——滑块验证_插入图片_03

下列为滑块验证的回调函数：

vue——滑块验证_插入图片_04