作者gitee地址：https://gitee.com/monoplasty/vue-monoplasty-slide-verify
使用步骤：
1、安装插件
npm install --save vue-monoplasty-slide-verify2、在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 |
