RVerify.js - 一款轻量级图片旋转验证插件

RVerify.js

✅❎ 一款轻量级图片旋转验证插件

官方文档

官方文档：RVerify.js
在线演示：RVerify.js Demo

快速上手

安装

把 RVerify.js 和 RVerify.css 添加进你的项目。

<script src="RVerify.js"></script>
<link rel="stylesheet" href="RVerify.css"/>

你可以从 unpkg or jsdelivr 获取相应的 CDN 链接。（注：上面代码块相应地方需要替换正确的库和样式链接。）

RVerify.js 已经发布到 npm.

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
默认: #38F

给验证框底部设置扩展功能文本颜色。

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://www.humanewatch.org/app/uploads/2018/10/Elephant_zoo.jpg',
    'https://askabiologist.asu.edu/sites/default/files/styles/panopoly_image_full/public/side-content/tortoiseshell_she-cat.jpg?itok=tbXBe5H7',
    'http://www.caraphil.org/mainsite/wp-content/uploads/2016/01/Monching-CARA-rescued-cat-pet-for-adoption-animal-welfare-in-the-Philippines.jpg'
  ]
})

备注: 至少需要设置一张图片。

感谢

RVerify © 2020-present，左撇峰子在 MIT License 许可下发布 RVerify 。