作者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