有些網(wǎng)站為了防止有人惡意使用腳本進(jìn)行批量操作，會設(shè)置前后端進(jìn)行配合的圖片滑動驗(yàn)證，本文這里只介紹前端的驗(yàn)證功能。
這里可以直接使用 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="向右滑動驗(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)證通過锹雏，耗時 '+ (times / 1000).toFixed(1) + '秒'
},
onFail(){
this.text = '驗(yàn)證失敗'
},
onRefresh(){
//點(diǎn)擊刷新按鈕
this.text = ''
},
onFulfilled() {
//驗(yàn)證失敗自動刷新
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>
組件對應(yīng)的參數(shù)和回調(diào)函數(shù)：
tips：當(dāng)參數(shù)imgs不傳或者傳空數(shù)組時，圖片庫默認(rèn)使用第三方api提供的圖片路徑泞歉，可能加載緩慢逼侦。
