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

这里能够间接应用 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提供的图片门路，可能加载迟缓。