前端图片滑动验证

有些网站为了防止有人恶意使用脚本进行批量操作，会设置前后端进行配合的图片滑动验证，本文这里只介绍前端的验证功能。

这里可以直接使用 vue-monoplasty-slide-verify 这个库组件，效果演示如下：

开始使用

库组件下载：

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

main.js中引入全局组件SlideVerify：

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

使用组件：

<template>
    <!-- 遮罩层 -->
    <div class="mask">
      <div class="slideContainer">
             <slide-verify 
               @success="onSuccess" 
               @fail="onFail" 
               @refresh="onRefresh" 
               @fulfilled="onFulfilled" 
               slider-text="向右滑动验证">
             </slide-verify>
             <div style="margin-top: 15px;">{{ text }}</div>
      </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      text:''
    }
  },
  methods:{
      onSuccess(times){
          this.text = '验证通过，耗时 '+ (times / 1000).toFixed(1) + '秒'
      },
      onFail(){
          this.text = '验证失败'
      },
      onRefresh(){
          //点击刷新按钮
          this.text = ''
      },
      onFulfilled() {
          //验证失败自动刷新
          this.text = '重新验证'
      },
  }
}
</script>
<style scoped>
.mask {
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}
.mask .slideContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: rgb(255, 255, 255);
  transform: translate(-50%,-50%);
  padding: 15px;
}
</style>

组件对应的参数和回调函数：

tips：当参数imgs不传或者传空数组时，图片库默认使用第三方api提供的图片路径，可能加载缓慢。