有些網(wǎng)站為了防止有人惡意使用腳本進(jìn)行批量操作，會(huì)設(shè)置前后端進(jìn)行配合的圖片滑動(dòng)驗(yàn)證，本文這里只介紹前端的驗(yàn)證功能。

這里可以直接使用 vue-monoplasty-slide-verify 這個(gè)庫(kù)組件，效果演示如下：

開始使用

庫(kù)組件下載：

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="向右滑動(dòng)驗(yàn)證">
             </slide-verify>
             <div style="margin-top: 15px;">{{ text }}</div>
      </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      text:''
    }
  },
  methods:{
      onSuccess(times){
          this.text = '驗(yàn)證通過(guò)，耗時(shí) '+ (times / 1000).toFixed(1) + '秒'
      },
      onFail(){
          this.text = '驗(yàn)證失敗'
      },
      onRefresh(){
          //點(diǎn)擊刷新按鈕
          this.text = ''
      },
      onFulfilled() {
          //驗(yàn)證失敗自動(dòng)刷新
          this.text = '重新驗(yàn)證'
      },
  }
}
</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>

組件對(duì)應(yīng)的參數(shù)和回調(diào)函數(shù)：

tips：當(dāng)參數(shù)imgs不傳或者傳空數(shù)組時(shí)，圖片庫(kù)默認(rèn)使用第三方api提供的圖片路徑，可能加載緩慢。