# 安装
把 RVerify.js 和 RVerify.css 添加进你的项目。
<script src="RVerify.js"></script>
<link rel="stylesheet" href="RVerify.css"/>
你可以从 unpkg (opens new window) or jsdelivr (opens new window) 获取相应的 CDN 链接。（注：上面代码块相应地方需要替换正确的库和样式链接。）
RVerify.js 已经发布到 npm (opens new window).
npm install --save rverify
# 基础用法
只需使用 action() 函数来激活验证框：
RVerify.action(function(res){
console.log(res);
});
res 将返回 3 个不同的代码：
0: 验证失败；1: 验证成功；2: 无任何操作。（在没有通过验证的情况下，手动关闭验证框都将返回该值。）
# 参数配置
你可以通过 RVerify.configure({}) 来配置一些参数。
# mask
类型: Number
默认: 0.5
设置遮罩透明度。
RVerify.configure({
mask: 0.5
})
# maskClosable
类型: Boolean
默认: false
设置点击遮罩时是否允许被关闭。
RVerify.configure({
maskClosable: true
})
# closeIcon
类型: String
默认: (SVG代码)
设置验证框关闭图标。
RVerify.configure({
closeIcon: '(Please copy the SVG code)'
})
备注: 推荐设置 SVG 图标的 width 和 height 都为 20px。
# sliderIcon
类型: String
默认: (SVG代码)
设置验证框滑块图标。
RVerify.configure({
sliderIcon: '(Please copy the SVG code)'
})
备注: 推荐设置 SVG 图标的 width 和 height 都为 20px。
# extraIcon
类型: String
默认: (SVG代码)
设置验证框扩展图标。
RVerify.configure({
extraIcon: '(Please copy the SVG code)'
})
备注: 推荐设置 SVG 图标的 width 和 height 都为 15px。
# tolerance
类型: Number
默认: 10
设置验证容差范围。（区间：5°~45°）
RVerify.configure({
tolerance: 10
})
备注: 为了确保友好的验证效果，该值取值范围在 5°~45°。
# duration
类型: Number
默认: 500
设置验证框延迟关闭时间。（单位：毫秒）
RVerify.configure({
duration: 1000
})
# title
类型: String
默认: 身份验证
设置验证框标题。
RVerify.configure({
title: 'Authentication'
})
# text
类型: String
默认: 拖动滑块，使图片角度为正
设置验证框提示文本。
RVerify.configure({
text: '拖动滑块，使图片角度为正'
})
# extra
类型: String
默认: null
给验证框底部设置扩展功能。
RVerify.configure({
extra: '意见反馈'
})
# extraColor
类型: String
默认: #4E6EF2
给验证框底部设置扩展功能文本颜色。
RVerify.configure({
extraColor: '#1ca280'
})
# extraLink
类型: String
默认: https://github.com/zpfz
给验证框底部设置扩展功能跳转链接。
RVerify.configure({
extraLink: 'https://www.npmjs.com/package/rverify'
})
# zIndex
类型: Number
默认: 9999
设置验证框的 z-index 。
RVerify.configure({
zIndex: 1000
})
# album
类型: Array
默认: []
设置验证框图片显示的相册集。
RVerify.configure({
album: [
'https://rverify.vercel.app/assets/1.jpg',
'https://rverify.vercel.app/assets/2.jpg',
'https://rverify.vercel.app/assets/3.jpg',
'https://rverify.vercel.app/assets/4.jpg',
'https://rverify.vercel.app/assets/5.jpg',
'https://rverify.vercel.app/assets/6.jpg',
'https://rverify.vercel.app/assets/7.jpg',
'https://rverify.vercel.app/assets/8.jpg',
'https://rverify.vercel.app/assets/9.jpg',
'https://rverify.vercel.app/assets/10.jpg'
]
})
备注: 至少需要设置一张图片，图片大小为 152 px。
# 更新日志
# 0.1.3
- 🍀 固定验证图片大小为 152px
- 🐞 修复移动端浏览器手势影响滑块拖动的问题
# 0.1.2
- 🍀 优化图片旋转算法逻辑
# 0.1.1
- 🍀 优化滑块以及滑动条样式
- 🍀 优化开发模式的报错提示
# 0.1.0
- 🍹 RVerify.js 正式版发布
# 0.1.0-beta.2
- 🌟 支持在移动端使用该插件 #1 (opens new window)
- 🍀 优化部分样式和逻辑
# 贡献者
感谢所有为该项目贡献的小伙伴哦~
# 许可
RVerify © 2020-present，左撇峰子在 MIT License (opens new window) 许可下发布 RVerify 。