mizuka-wu / Vue2 Verify
Licence: mit
vue的验证码插件
Stars: ✭ 311
Projects that are alternatives of or similar to Vue2 Verify
Vue Testing Examples
Advanced testing with vuejs. When you need to go beyond Getting started section and see some real world example with everything that proper tests should have.
Stars: ✭ 288 (-7.4%)
Mutual labels: vue2
Vue Ydui
A mobile components Library with Vue2.js. 一只基于Vue2.x的移动端组件库。
Stars: ✭ 2,798 (+799.68%)
Mutual labels: vue2
Hare
🐇 Application boilerplate based on Vue.js 2.x, Koa 2.x, Element-UI and Nuxt.js
Stars: ✭ 258 (-17.04%)
Mutual labels: vue2
V Offline
🔌 Simple VueJS component to detect offline & online changes.
Stars: ✭ 307 (-1.29%)
Mutual labels: vue2
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (-8.04%)
Mutual labels: vue2
Vuejs Serverside Template Xss
Demo of a Vue.js app that mixes both clientside templates and serverside templates leading to an XSS vulnerability
Stars: ✭ 278 (-10.61%)
Mutual labels: vue2
Vuejs Component Style Guide
Vue.js Component Style Guide
Stars: ✭ 2,796 (+799.04%)
Mutual labels: vue2
Coreui Free Vue Admin Template
Open source admin template based on Bootstrap 5 and Vue 3
Stars: ✭ 2,951 (+848.87%)
Mutual labels: vue2
Vue Happy Scroll
基于vue2.0实现的滚动条插件。scroll component for vue2.0
Stars: ✭ 299 (-3.86%)
Mutual labels: vue2
vue2-verify
基于https://github.com/Hibear/verify 的验证码项目
项目验证码类型请查看
支持的验证码类型
- 常规验证码picture 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。
- 运算验证码compute 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。
- 滑动验证码slide 通过简单的滑动即可完成验证，应用与移动端体验很好。
- 拼图验证码puzzle 拼图。
- 选字验证码pick 通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。
请记住一件事！
纯前端是可以被别人绕过验证的!
todo
- 添加在线演示和修改
文档
如何使用
npm i vue2-verify
事件
| 参数 | 说明 |
|---|---|
ready |
验证码初始化成功的回调函数。 |
success |
验证码匹配成功后的回调函数。如要重新初始化：success:function(obj){obj.refresh();}。 |
error |
验证码匹配失败后的回调函数。 |
常规验证码picture
参数说明
| 参数 | 说明 |
|---|---|
type |
验证码type为picture或者1 |
width |
常规验证码的宽,支持百分比形式设置，如：width:100%。 |
height |
常规验证码的高,支持百分比形式设置，如：height:10%。 |
fontSize |
常规验证码中的字母&数字的字体大小，默认为30px。 |
codeLength |
常规验证码中显示的验证码个数，默认为6。 |
运算验证码compute
参数说明
| 参数 | 说明 |
|---|---|
type |
验证码type为compute或者2 |
figure |
运算验证码的位数,默认是100以内的数字，即两位数。如果是要设置三位数，则设置figure:1000。 |
arith |
算法选择，支持加、减、乘。设置为1至3分别代表加减乘，0为随机切换。。 |
width |
运算验证码的宽,支持百分比形式设置，如：width:100%。 |
height |
运算验证码的高,支持百分比形式设置，如：height:10%。 |
fontSize |
运算验证码中的数字的字体大小，默认为30px。 |
showButton |
是否显示确定按钮，默认为true |
滑动验证码slide
参数说明
| 参数 | 说明 |
|---|---|
type |
验证码type为slide或者3 |
vOffset |
滑动验证码的误差量，如：误差量为5px就能完成验证，设置vOffset:5。 |
explain |
滑动条内的提示，不设置默认是：向右滑动完成验证。 |
barSize |
其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如：{width:'100%',height:'40px'} |
showButton |
是否显示确定按钮，默认为true |
拼图验证码puzzle
参数说明
| 参数 | 说明 |
|---|---|
type |
验证码type为puzzle或者4 |
mode |
验证码的显示方式，弹出式pop，固定fixed，默认是：mode : 'fixed'。 |
vOffset |
滑动验证码的误差量，默认单位是px。如：误差量为5px就能完成验证，设置vOffset:5。 |
vSpace |
验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，设置vSpace:5。 |
explain |
滑动条内的提示，不设置默认是：'向右滑动完成验证'。 |
imgUrl |
背景图片的地址，不设置默认是：'images/'。 |
imgName |
验证码背景图的数组集合，默认从images目录中进行读取，如 ['1.jpg', '2.jpg']。 |
imgSize |
其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:'100%',height:'200px'}。 |
blockSize |
其中包含了width、height两个参数，分别代表拼图块的宽度和高度，如:{width:'40px',height:'40px'}。。 |
barSize |
其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:'100%',height:'40px'} |
showButton |
是否显示确定按钮，默认为true |
选字验证码pick
参数说明
| 参数 | 说明 |
|---|---|
type |
验证码type为pick或者5 |
mode |
验证码的显示方式，弹出式pop，固定fixed，默认是：mode : 'fixed'。 |
defaultNum |
验证码中出现的文字数量，如要默认4个字 |
checkNum |
验证码中要求比对的文字数量，如要按序比对2个字 |
vSpace |
验证码图片和移动条容器的间隔，默认单位是px。 |
imgUrl |
背景图片的地址，不设置默认是：'images/'。 |
imgName |
验证码背景图的数组集合，默认从images目录中进行读取，如 ['1.jpg', '2.jpg']。 |
imgSize |
其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:'100%',height:'200px'}。 |
barSize |
其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:'100%',height:'40px'} |
showButton |
是否显示确定按钮，默认为true |
// 基础用例
<template>
<Verify @success="alert('success')" @error="alert('error')" :type="1"></Verify>
</template>
<script>
import Verify from 'vue2-verify'
export default {
name: 'app',
methods: {
alert(text) {
console.log(text)
}
},
components: {
Verify
}
}
</script>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].