使用插件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

callBack