1 | <h1 align="center">RVerify.js</h1>
|
2 | <div align="center">
|
3 |
|
4 | ✅❎ A lightweight image rotation verification plugin.
|
5 |
|
6 | ![Build](https://img.shields.io/badge/build-passing-brightgreen?style=flat-square) ![Downloads](https://img.shields.io/npm/dt/rverify?style=flat-square&color=red) ![Version](https://img.shields.io/github/package-json/v/zpfz/RVerify.js?style=flat-square&color=orange) ![License](https://img.shields.io/github/license/zpfz/RVerify.js?style=flat-square&color=blue)
|
7 |
|
8 | </div>
|
9 |
|
10 | ## Installation
|
11 | Add `RVerify.js` and `RVerify.css` to your project.
|
12 | ```js
|
13 | <script src="RVerify.js"></script>
|
14 | <link rel="stylesheet" href="RVerify.css"/>
|
15 | ```
|
16 | You can get the corresponding CDN link from [unpkg](https://unpkg.com/rverify/) or [jsdelivr](https://cdn.jsdelivr.net/gh/zpfz/RVerify.js/dist/).
|
17 |
|
18 | RVerify.js is available via [npm](https://www.npmjs.com/package/rverify).
|
19 | ```sh
|
20 | npm install --save rverify
|
21 | ```
|
22 |
|
23 | ## Basic usage
|
24 | Simply call `action()` to activate the verification modal.
|
25 | ```js
|
26 | RVerify.action(function(res){
|
27 | console.log(res);
|
28 | });
|
29 | ```
|
30 | `res` will return 3 different codes:
|
31 |
|
32 | - `0`: Verify failed.
|
33 | - `1`: Verify successful.
|
34 | - `2`: No action.(Return the code when the modal is closed before it successfully verified.)
|
35 |
|
36 | ## Configuration
|
37 | You can configure some parameters through `RVerify.configure({})`.
|
38 |
|
39 | ### mask
|
40 | Type: `Number`
|
41 | Default: `0.5`
|
42 |
|
43 | Set the mask transparency.
|
44 | ```js
|
45 | RVerify.configure({
|
46 | mask: 0.5
|
47 | })
|
48 | ```
|
49 |
|
50 | ### maskClosable
|
51 | Type: `Boolean`
|
52 | Default: `false`
|
53 |
|
54 | Set whether click the mask can be closed.
|
55 | ```js
|
56 | RVerify.configure({
|
57 | maskClosable: true
|
58 | })
|
59 | ```
|
60 | ### closeIcon
|
61 | Type: `String`
|
62 | Default: `(SVG CODE)`
|
63 |
|
64 | Set the modal close icon.
|
65 | ```js
|
66 | RVerify.configure({
|
67 | closeIcon: '(Please copy the SVG code)'
|
68 | })
|
69 | ```
|
70 | **NOTE**: It's recommended to set the SVG icon `width` and `height` to `20px`.
|
71 |
|
72 | ### sliderIcon
|
73 | Type: `String`
|
74 | Default: `(SVG CODE)`
|
75 |
|
76 | Set the modal slider icon.
|
77 | ```js
|
78 | RVerify.configure({
|
79 | sliderIcon: '(Please copy the SVG code)'
|
80 | })
|
81 | ```
|
82 | **NOTE**: It's recommended to set the SVG icon `width` and `height` to `20px`.
|
83 |
|
84 | ### extraIcon
|
85 | Type: `String`
|
86 | Default: `(SVG CODE)`
|
87 |
|
88 | Set the modal extra icon.
|
89 | ```js
|
90 | RVerify.configure({
|
91 | extraIcon: '(Please copy the SVG code)'
|
92 | })
|
93 | ```
|
94 | **NOTE**: It's recommended to set the SVG icon `width` and `height` to `15px`.
|
95 |
|
96 | ### tolerance
|
97 | Type: `Number`
|
98 | Default: `10`
|
99 |
|
100 | Set the verification tolerance range.(Range: 5°~45°)
|
101 | ```js
|
102 | RVerify.configure({
|
103 | tolerance: 10
|
104 | })
|
105 | ```
|
106 | **NOTE**: In order to ensure a friendly verification effect, its value ranges from 5° to 45°.
|
107 |
|
108 | ### duration
|
109 | Type: `Number`
|
110 | Default: `500`
|
111 |
|
112 | Set the modal delay closing time.(Unit: ms)
|
113 | ```js
|
114 | RVerify.configure({
|
115 | duration: 1000
|
116 | })
|
117 | ```
|
118 |
|
119 | ### title
|
120 | Type: `String`
|
121 | Default: `身份验证`
|
122 |
|
123 | Set the modal title.
|
124 | ```js
|
125 | RVerify.configure({
|
126 | title: 'Authentication'
|
127 | })
|
128 | ```
|
129 |
|
130 | ### text
|
131 | Type: `String`
|
132 | Default: `拖动滑块,使图片角度为正`
|
133 |
|
134 | Set the modal text.
|
135 | ```js
|
136 | RVerify.configure({
|
137 | text: 'Drag the slider to make the image angle positive.'
|
138 | })
|
139 | ```
|
140 |
|
141 | ### extra
|
142 | Type: `String`
|
143 | Default: `null`
|
144 |
|
145 | Set extra features at the bottom of the modal.
|
146 | ```js
|
147 | RVerify.configure({
|
148 | extra: 'View on Npm'
|
149 | })
|
150 | ```
|
151 |
|
152 | ### extraColor
|
153 | Type: `String`
|
154 | Default: `#4E6EF2`
|
155 |
|
156 | Set extra features text color at the bottom of the modal.
|
157 | ```js
|
158 | RVerify.configure({
|
159 | extraColor: '#1ca280'
|
160 | })
|
161 | ```
|
162 |
|
163 | ### extraLink
|
164 | Type: `String`
|
165 | Default: `https://github.com/zpfz`
|
166 |
|
167 | Set extra features link at the bottom of the modal.
|
168 | ```js
|
169 | RVerify.configure({
|
170 | extraLink: 'https://www.npmjs.com/package/rverify'
|
171 | })
|
172 | ```
|
173 |
|
174 | ### zIndex
|
175 | Type: `Number`
|
176 | Default: `9999`
|
177 |
|
178 | Set the modal z-index.
|
179 | ```js
|
180 | RVerify.configure({
|
181 | zIndex: 1000
|
182 | })
|
183 | ```
|
184 |
|
185 | ### album
|
186 | Type: `Array`
|
187 | Default: `[]`
|
188 |
|
189 | Set the modal randomly displayed image album.
|
190 | ```js
|
191 | RVerify.configure({
|
192 | album: [
|
193 | 'https://rverify.vercel.app/assets/1.jpg',
|
194 | 'https://rverify.vercel.app/assets/2.jpg',
|
195 | 'https://rverify.vercel.app/assets/3.jpg',
|
196 | 'https://rverify.vercel.app/assets/4.jpg',
|
197 | 'https://rverify.vercel.app/assets/5.jpg',
|
198 | 'https://rverify.vercel.app/assets/6.jpg',
|
199 | 'https://rverify.vercel.app/assets/7.jpg',
|
200 | 'https://rverify.vercel.app/assets/8.jpg',
|
201 | 'https://rverify.vercel.app/assets/9.jpg',
|
202 | 'https://rverify.vercel.app/assets/10.jpg'
|
203 | ]
|
204 | })
|
205 | ```
|
206 | **NOTE**: An image needs to be set at least.
|
207 |
|
208 | ## Contributors
|
209 | This project exists thanks to all the people who contribute.
|
210 |
|
211 | ![Feng L.H.](https://avatars2.githubusercontent.com/u/49757965?s=60&v=4) ![Guojun Chen](https://avatars2.githubusercontent.com/u/10856371?s=60&v=4) ![WampyCakes](https://avatars.githubusercontent.com/u/9156604?s=460&u=48e7338d3c8083644bfa242a592cb2b457a36aa5&v=4)
|
212 |
|
213 |
|
214 | ## License
|
215 | RVerify © 2020-present, Feng L.H. Released under the [MIT License](https://mit-license.org/). |
\ | No newline at end of file |