纯前端滑块图形验证码,可自定义图片和通过远程获取默认从Lorem Picsum图库获取
npm install vue-picture-verify --save
import VuePictureVerify from 'vue-picture-verify';
Vue.use(VuePictureVerify)
## 组件中使用
<VuePictureVerify :show="show"></VuePictureVerify>
<template>
<div>
<button @click="handleShow">显示</button>
<VuePictureVerify :show="show"></VuePictureVerify>
</div>
</template>
<script >
export default{
data() {
return {
show: false
}
},
methods: {
handleShow() {
this.show = true
}
}
}
</script>
<style scoped>
</style>
props | 类型 | 默认值 | 说明 |
---|---|---|---|
show | Boolean | false | 是否显示弹窗 |
accuracy | Number | 5 | 缺口和拼图重合的精度,越小越难 |
imgList | Array | [] | 自定义图片的图片数组 |
originImg | String | https://picsum.photos/300/150/ | 从远程获取图片,imgList为空时才使用 |
事件名 | 返回值 | 说明 |
---|---|---|
success | void | 验证通过时会触发 |
fail | void | 验证失败时会触发 |