mizuka-wu / vue2-verify Goto Github PK

View Code? Open in Web Editor NEW

387.0 7.0 76.0 2.17 MB

vue的验证码插件

Home Page: https://mizuka-wu.github.io/vue2-verify/dist/

License: MIT License

JavaScript 16.50% HTML 0.22% Vue 83.28%

vue vue2 verifycode

vue2-verify's Introduction

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>

vue2-verify's People

Contributors

Stargazers

Watchers

vue2-verify's Issues

代码有毒，找了好久低版本安卓打开白屏原因

代码有毒，找了好久低版本安卓打开白屏原因是因为用了这个插件

安卓低版本，安卓5.1版本

https://github.com/mizuka-wu/vue2-verify/blob/master/src/lib/util.js
util.js最末几行代码居然加了几个 const 把const 改为var就可以了

export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']

"換一張" 給個可以自定義文字的選項吧

如題

希望可以增加一個自定義選項，自己輸入文字取代 "換一張"

回车时会更新验证码，怎么解决

showButton属性不起作用

引用插件在ios10以下会导致白屏

引用插件在ios8 9会导致白屏，页面不加载

这个自带的按钮怎么去了

How do I bind the code value for type 1?

希望能在配置项中添加是否显示插件自带的按钮

因为有时候引用插件的时候不需要自带的这个button 我还需要手动去包里面改很多次。希望能不能自定义配置这个。

vue报错，引入依赖出错

[报错]No PostCSS Config found in

难道与vue-cli3有关？

滑动解锁 barSize 设置宽度无效

滑动解锁 barSize 设置宽度无效
:barSize="{width:'200px', height:'40px'}"
出去的还是写的400px

我去除掉他默认的确认按钮，我应该怎么触发它的点击事件

还是想问一下这个怎么设置图片

看了一下VerifySlide.vue里面似乎是写的“background: 'url(' + imgUrl + imgName[imgRand]+')'”，而imgUrl默认给的是“'http://via.placeholder.com/'”，我想知道假如我想在用本地存储的图片怎么办？我写的是require('../images')这样会报错，写成'require('../images/1.png')'这样的具体的路径才没有报错，但是这样又没法配合后面的imgName参数了。。

按demo引入后，loader报错

按demo文档引入后，loader报错如下图，

看了issues，以往有回答说是webpack问题，所以修改了babel-loader，如下图，

报错依旧一样。请问是什么原因导致的呢？

选字验证码怎么拿需要验证的文字

滑动验证用css改变滑块的宽度后，向右滑动验证距离怎么改变

使用type = slide的普通滑动验证
我想将里面滑块的宽度调宽一些，发现默认的宽度是40px，没有开放修改属性
找到css强行修改后，向右侧滑动的距离计算还是按照40px计算的没有获取到正常距离。
请问这个怎么修改只能修改js了么

IE9下报错

项目用的框架是VUE，然后在IE9之中报错语法错误，看了下，是utils.js里面的const没被转成es5，改成
var _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']
export {_code_chars,_code_color1,_code_color2} 就好了

mizuka-wu / vue2-verify Goto Github PK

vue2-verify's Introduction

vue2-verify

支持的验证码类型

请记住一件事！

todo

文档

如何使用

事件

常规验证码picture

参数说明

运算验证码compute

参数说明

滑动验证码slide

参数说明

拼图验证码puzzle

参数说明

选字验证码pick

参数说明

vue2-verify's People

Contributors

Stargazers

Watchers

Forkers

vue2-verify's Issues

Recommend Projects

Recommend Topics

Recommend Org