使用插件SlideVerify实现滑块验证

作者gitee地址：https://gitee.com/monoplasty/vue-monoplasty-slide-verify

使用步骤：

1、安装插件

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

2、在main.js中进行配置

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

在页面中的用法：

<!-- 滑块验证码 --><el-card class="cover" v-if="loginAdmin.id"><slide-verify :l="42":r="10":w="310":h="155"slider-text="向右滑动":imgs="puzzleImgList"@success="onSuccess"@fail="onFail"@refresh="onRefresh"></slide-verify></el-card>

 在这里因为原来的图片加载非常慢，所以这里使用的是本地图片

export default {name: 'App',data() {return {puzzleImgList: [require("@/static/1.png"),require("@/static/2.png"),],msg: '',}},methods: {onSuccess() {   //滑块验证通过触发Cookies.set("admin", JSON.stringify(this.loginAdmin))this.$notify.success("验证成功");this.$router.push('/')},onFill() {console.log('滑块验证失败');},onRefresh() {console.log("refresh");}}
}

argument

Param	Type	Describe	Version
l	Number	block length
r	Number	block circle radius
w	Number	canvas width
h	Number	canvas height
sliderText	String	Slide filled right	1.0.5
imgs	Array	picture array 背景图数组，默认值 []	1.1.0
accuracy	Number	滑动验证的误差范围，默认值 5	1.1.1
show	Boolean	是否显示刷新按钮，默认值 true	1.1.1

callBack

Event	Type	Describe	Version
success	Function	success callback	返回时间参数，单位为毫秒
fail	Function	fail callback
refresh	Function	点击刷新按钮后的回调函数
again	Function	检测到非人为操作滑动时触发的回调函数	1.1.1
fulfilled	Function	刷新成功之后的回调函数	1.1.1