Package Exports

rverify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rverify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RVerify.js

✅❎ A lightweight image rotation verification plugin.

Downloads Version License

Installation

Add RVerify.js and RVerify.css to your project.

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

You can get the corresponding CDN link from unpkg or jsdelivr.

RVerify.js is available via npm.

npm install --save rverify

Basic usage

Simply call action() to activate the verification modal.

RVerify.action(function(res){
  console.log(res);
});

res will return 3 different codes:

0: Verify failed.
1: Verify successful.
2: No action.(Return the code when the modal is closed before it successfully verified.)

Configuration

You can configure some parameters through RVerify.configure({}).

mask

Type: Number
Default: 0.5

Set the mask transparency.

RVerify.configure({
  mask: 0.5
})

maskClosable

Type: Boolean
Default: false

Set whether click the mask can be closed.

RVerify.configure({
  maskClosable: true
})

closeIcon

Type: String
Default: (SVG CODE)

Set the modal close icon.

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

NOTE: It's recommended to set the SVG icon width and height to 20px.

sliderIcon

Type: String
Default: (SVG CODE)

Set the modal slider icon.

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

NOTE: It's recommended to set the SVG icon width and height to 20px.

extraIcon

Type: String
Default: (SVG CODE)

Set the modal extra icon.

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

NOTE: It's recommended to set the SVG icon width and height to 15px.

tolerance

Type: Number
Default: 10

Set the verification tolerance range.(Range: 5°~45°)

RVerify.configure({
  tolerance: 10
})

NOTE: In order to ensure a friendly verification effect, its value ranges from 5° to 45°.

duration

Type: Number
Default: 500

Set the modal delay closing time.(Unit: ms)

RVerify.configure({
  duration: 1000
})

title

Type: String
Default: 身份验证

Set the modal title.

RVerify.configure({
  title: 'Authentication'
})

text

Type: String
Default: 拖动滑块，使图片角度为正

Set the modal text.

RVerify.configure({
  text: 'Drag the slider to make the image angle positive.'
})

extra

Type: String
Default: null

Set extra features at the bottom of the modal.

RVerify.configure({
  extra: 'View on Npm'
})

extraColor

Type: String
Default: #4E6EF2

Set extra features text color at the bottom of the modal.

RVerify.configure({
  extraColor: '#1ca280'
})

extraLink

Type: String
Default: https://github.com/zpfz

Set extra features link at the bottom of the modal.

RVerify.configure({
  extraLink: 'https://www.npmjs.com/package/rverify'
})

zIndex

Type: Number
Default: 9999

Set the modal z-index.

RVerify.configure({
  zIndex: 1000
})

album

Type: Array
Default: []

Set the modal randomly displayed image album.

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'
  ]
})

NOTE: A 152*152 px image needs to be set at least.

Contributors

This project exists thanks to all the people who contribute.

Feng L.H. Guojun Chen WampyCakes