Skip to content

hu5871/vue-picture-verify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-picture-verify

纯前端滑块图形验证码,可自定义图片和通过远程获取默认从Lorem Picsum图库获取

demo

安装

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 验证失败时会触发

Releases

No releases published

Packages

No packages published