Vue实现图形滑动验证

最近在项目中使用到图形验证来避免用户过多的重复操作，此功能没有使用到后端，单纯的前端实现，由于自己写的话时间来不及，所以这里用到了vue的组件库 vue-monoplasty-slide-verify，抽空整理了一下示例，供大家参考哦～

一、使用命令导入组件库依赖

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

二、在main.js中引用组件

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

三、 使用组件

        1、Html部分：(imgs可自定义多张图片)

<div class="content-box">
    <div class="verify-box">
        <slide-verify ref="slideRef" :l="42" :r="10"
          :w="280" :h="200" :imgs="images" slider-text="向右滑动"
          @success="onSuccess" @fail="onFail" @refresh="onRefresh"
          @fulfilled="onRefreshComplete" @again="onAgain">
        </slide-verify>
    </div>
    <div class="tips" :class="isSuccess ? '' : 'red'">{
   
   {tipsMsg}}</div>
</div>

        2、Js部分：(引用本地图片需要使用require才可正常使用哦)

export default {
  name: 'SlideVerifyCompontents',
  data() {
    return {
      images: [
        require('../assets/images/pic2.png'),
        require('../assets/images/pic3.jpeg'),
        require('../assets/images/pic4.jpeg')
      ],
      tipsMsg:'',
      isSuccess: true
    }
  },
  methods: {
    // 成功回调
    onSuccess(){
        this.tipsMsg = '恭喜您，验证成功啦！';
        this.isSuccess = true;
    },
    // 失败回调
    onFail(){
        this.tipsMsg = '验证失败，请重试哦！';
        this.isSuccess = false;
    },
    // 点击刷新回调
    onRefresh(){
        this.tipsMsg = ''
    },
    // 刷新成功后回调
    onRefreshComplete(){
      // TODO
      this.tipsMsg = ''
      this.isSuccess = true;
    },
    // 检测到非人为操作
    onAgain() {
      this.tipsMsg = "再试一次吧～"
      this.$refs.slideRef.reset();
    }
  }
}