RVerify.js

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

在线演示
快速上手

# 安装


RVerify.jsRVerify.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 图标的 widthheight 都为 20px

# sliderIcon

类型: String
默认: (SVG代码)

设置验证框滑块图标。

RVerify.configure({
  sliderIcon: '(Please copy the SVG code)'
})

备注: 推荐设置 SVG 图标的 widthheight 都为 20px

# extraIcon

类型: String
默认: (SVG代码)

设置验证框扩展图标。

RVerify.configure({
  extraIcon: '(Please copy the SVG code)'
})

备注: 推荐设置 SVG 图标的 widthheight 都为 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'
})

类型: 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.now.sh/assets/1.jpg',
    'https://rverify.now.sh/assets/2.jpg',
    'https://rverify.now.sh/assets/3.jpg',
    'https://rverify.now.sh/assets/4.jpg',
    'https://rverify.now.sh/assets/5.jpg',
    'https://rverify.now.sh/assets/6.jpg',
    'https://rverify.now.sh/assets/7.jpg',
    'https://rverify.now.sh/assets/8.jpg',
    'https://rverify.now.sh/assets/9.jpg',
    'https://rverify.now.sh/assets/10.jpg'
  ]
})

备注: 至少需要设置一张图片,推荐图片大小大于 152 px。

# 更新日志


# 0.1.1

  • 🍀 优化滑块以及滑动条样式
  • 🍀 优化开发模式的报错提示

# 0.1.0

  • 🍹 RVerify.js 正式版发布

# 0.1.0-beta.2

  • 🌟 支持在移动端使用该插件 #1
  • 🍀 优化部分样式和逻辑

# 贡献者


感谢所有为该项目贡献的小伙伴哦~

Feng L.H. Guojun Chen

# 许可


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