https://github.com/hyperlife1119/patternlockjs
A pattern lock running on the browser, supporting both desktop and mobile.
https://github.com/hyperlife1119/patternlockjs
patternlock svg
Last synced: 12 months ago
JSON representation
A pattern lock running on the browser, supporting both desktop and mobile.
- Host: GitHub
- URL: https://github.com/hyperlife1119/patternlockjs
- Owner: HyperLife1119
- License: apache-2.0
- Created: 2020-02-02T15:56:33.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T06:18:44.000Z (over 1 year ago)
- Last Synced: 2025-03-25T13:02:25.815Z (about 1 year ago)
- Topics: patternlock, svg
- Language: TypeScript
- Homepage: https://hyperlife1119.github.io/PatternLockJS/
- Size: 117 KB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
PatternLockJS
一个运行在浏览器上的图案锁，同时支持桌面端和移动端。
A pattern lock running on the browser, supporting both desktop and mobile.
> 特点：基于SVG实现，简单，灵活且易用。
#### 用法 (Usage)：
1. 设置一个空元素，作为PatternLock图案锁的容器
```html
```
2. 为其设置尺寸（宽高）
```css
#lock {
width: 45vh;
height: 45vh;
}
```
3. 引入patternlock.js
```html
```
4. 实例化PatternLock，共有两个参数。
* 参数一：`selectors` 选择器，通过选择器找到元素作为PatternLock图案锁的容器。
* 参数二：`callback` 一个包含回调函数的对象。
* `verify`：接收一个参数，值为用户操作PatternLock图案锁得出的密码。在PatternLock图案锁进行密码验证时触发，该函数必须返回一个布尔值。（必须）
* `complete`：接收一个参数，值为用户操作PatternLock图案锁得出的密码。在PatternLock图案锁进行密码验证完成时触发。（非必须）
* `reset`：在PatternLock图案锁重置时触发。（非必须）
```javascript
const lock = new PatternLock('#lock', {
complete: value => {
console.log('complete: ' + value);
},
reset: () => {
console.log('reset');
},
verify: value => {
if (value == pwd) {
alert('密码正确！');
return true;
} else {
return false;
}
}
});
```
5. Tips：添加 `overscroll-behavior-y: contain;` 到body元素，可阻止部分移动端浏览器下拉刷新等默认行为（这些浏览器默认行为可能会干扰用户操作PatternLock图案锁）。
```css
body {
overscroll-behavior-y: contain;
}
```
> 具体代码可参考`index.html`