代码拉取完成,页面将自动刷新
import {ImgCode} from 'verifycode';
let config = {
// [非必传] 默认:blend 类型blend:数字字母混合类型、number:纯数字、letter:纯字母 [ string ]
type : 'blend',
// [非必传] 默认:100 图片宽度 [ int ]
width : 100,
// [非必传] 默认:50 图片高度 [ int ]
height : 50,
// [非必传] 默认:4 验证码位数(需要足够宽否则会很挤) [ int ]
length : 4,
// [非必传] 默认:false 是否区分大小写 [ bool ]
matchCase : false,
};
this.verifyCode = new ImgCode(config);
let codeObject = this.verifyCode.create();
codeObject = {
imgUrl : '图片base64,例:data:image/png;base64,...',
code : 200, // 500为失败 同时会返回 一个message报错信息 并 imgUrl、imgCode 为 空
message : '创建成功!',
imgCode : '', // 正确答案, 可通过 this.verifyCode.getCode() 获得
};
// 其他方法
this.verifyCode.getCode(); // 获得正确答案
this.verifyCode.refresh(); // 刷新验证码 同等于调用 this.verifyCode.create 方法
this.verifyCode.submit(value); // 验证当前填写验证码是否正确 入参 value,回参 bool
import {CountImgCode} from 'verifycode';
let config = {
// [非必传] 默认:80 图片宽度 [ int ]
width : 80,
// [非必传] 默认:24 图片高度 [ int ]
height : 24,
// [非必传] 默认:'+-' 算数符 [ 仅支持传 +-*/ 四种组合 ] [ string ]
str : '+-',
};
this.verifyCode = new CountImgCode(config);
let codeObject = this.verifyCode.create();
codeObject = {
imgUrl : '图片base64,例:data:image/png;base64,...',
code : 200, // 500为失败 同时会返回 一个message报错信息 并 imgUrl、imgCode 为 空
message : '创建成功!',
imgCode : '', // 正确答案, 可通过 this.verifyCode.getCode() 获得
};
// 其他方法
this.verifyCode.getCode(); // 获得正确答案
this.verifyCode.refresh(); // 刷新验证码 同等于调用 this.verifyCode.create 方法
this.verifyCode.submit(value); // 验证当前填写验证码是否正确 入参 value,回参 bool
import {SlideCode} from 'verifycode';
let config = {
// [必传参数] 需要添加验证码的 dom 元素 [ dom类型 ]
dom : document.getElementById('test_box'),
// [必传参数] 为dom下新建的div添加的 唯一id [ string ]
id : 'box',
// [非必传] 宽度 [ int ]
width : 300,
// [非必传] 高度 [ int ]
height : 40,
// [非必传] 未滑动的背景色 [ string ]
beforeColor : '#e8e8e8',
// [非必传] 成功后的背景色 [ string ]
successColor : '#90ee90',
// [非必传] 文字颜色 [ string ]
fontColor : '#000',
// [非必传] 文字大小 [ int ]
fontSize : 14,
// [非必传] 滑块的背景颜色 [ string ]
sliderBackground : '#fff',
// [非必传] 滑块边框色 [ string ]
sliderBorderColor: '#ccc',
// [非必传] 已经滑过的背景色 [ string ]
underSliderBackground :'#add8e6',
// [必传参数] 成功回调函数 只会返回一次 [ function ]
success : () => {
console.log('111成功!');
},
// [非必传] 失败回调函数 每次滑动失败都会有一次调用 [ function ]
error : () => {
console.log('222失败!')
},
};
new SlideCode(config);
import {JigsawCode} from 'verifycode';
let config = {
// [必传参数] 需要添加验证码的 dom 元素 [ dom类型 ]
dom : document.getElementById('JigsawCode'),
// [必传参数] 为dom下新建的div添加的 唯一id [ string ]
id : 'JigsawCode_box',
// [非必传] 宽度 [ int ]
width : 310,
// [非必传] 高度 [ int ]
height : 200,
// [非必传] 未滑动的背景色 [ string ]
beforeColor : '#e8e8e8', // 未滑动的背景色
// [非必传] 文字颜色 [ string ]
fontColor : '#000', // 文字颜色
// [非必传] 文字大小 [ int ]
fontSize : 14, // 文字大小
// [必传参数] 成功回调函数 只会返回一次 [ function ]
success : function () {},
// [非必传] 失败回调函数 每次滑动失败都会有一次调用 [ function ]
error : function () {}
};
// 实例化
this.verifyCode = new JigsawCode(config);
// 创建
this.verifyCode.create();
// 刷新
this.verifyCode.refresh();
/*
TODO 引用注入 com.verifyCode.js
import {ImgCode, CountImgCode, SlideCode} from 'verifyCode';
*/
/*
TODO head标签中 注入 com.verifyCode.js
<script src="com.verifyCode.js"></script>
<script>
var ImgCode = verifyCode.ImgCode;
var CountImgCode = verifyCode.CountImgCode;
var SlideCode = verifyCode.SlideCode;
</script>
*/
.
├── public ## 静态资源用于启动时测试
├── src ## 工程主目录
│ │ └── lib ## 验证码功能实现目录
├── .babelrc ## babel配置
├── index.js ## 入口文件
├── package.json ## 工程依赖文件
├── webpack.config.js ## webpack配置文件
│
├── END!
IE内核 >= 9
Chrome >= 49
IOS >= 8
Android >= 7
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。