图片滑动验证

这里主要用的是插件：vue-monoplasty-slide-verify
github地址：https://github.com/monoplasty/vue-monoplasty-slide-verify
安装方式：

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

使用方式：

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

demo:

<template>
  <div>
    <slide-verify
      :l="42"
      :r="10"
      :w="310"
      :h="155"
      slider-text="向右滑动"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <div>{{msg}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: ""
    };
  },
  methods: {
    onSuccess() {
      this.msg = "login success";
    },
    onFail() {
      this.msg = "1";
    },
    onRefresh() {
      this.msg = "2";
    }
  }
};
</script>
<style lang="less" scoped>
</style>

效果：