wired-pattern-lock/README.md

A lightweight div-based gesture pattern lock library using SVG lines.

# 🔐 Wired Pattern Lock  

**V 1.1.1**  
轻量、易用的图案解锁组件。支持 HTML 标签快速集成或 JavaScript 初始化，适用于网页登录、操作验证、用户交互等场景。  

---

## 🚀 快速开始  

### 使用 CDN  

```html  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wired-pattern-lock/dist/wired.min.css">  
<script src="https://cdn.jsdelivr.net/npm/wired-pattern-lock/dist/wired.min.js"></script>  
```

### 使用 NPM  

```bash  
npm i wired-pattern-lock  
```

### 模块引入方式  

```javascript  
import Wired from 'wired-pattern-lock';  
```

---

## ✨ 两种用法  

### 方式一：HTML 标签初始化（推荐）  

```html  
<div id="lock"  
     wired  
     size="300"  
     correctpassword="123"  
     onsuccess="handleUnlock"  
     onfail="handleFail">  
</div>  

<script>  
  function handleUnlock(pwd) {  
    console.log('✅ 解锁成功:', pwd);  
  }  

  function handleFail(pwd) {  
    console.log('❌ 解锁失败:', pwd);  
  }  
</script>  
```

#### 启用 MD5 加密  

```html  
<div id="lock"  
     wired  
     md5  
     correctpassword="202cb962ac59075b964b07152d234b70">  
</div>  
```

### 方式二：JavaScript 初始化  

更灵活、适用于动态创建场景：  

```javascript  
const container = document.querySelector('#my-lock');  
const wired = new Wired(container, {  
  correctpassword: '01378',  
  md5: false,  
  onsuccess: pwd => console.log('✅ 解锁成功:', pwd),  
  onfail: pwd => console.log('❌ 解锁失败:', pwd)  
});  
```

---

## ⚙️ 属性说明  

| 属性名           | 类型               | 默认值   | 说明                                   |  
|------------------|--------------------|----------|----------------------------------------|  
| `wired`          | -                  | -        | 启用组件初始化（HTML模式）             |  
| `rows`           | Number             | 3        | 网格行数                               |  
| `cols`           | Number             | 3        | 网格列数                               |  
| `size`           | Number             | 300      | 容器尺寸（px）                         |  
| `pointradius`    | Number             | 20       | 点半径                                 |  
| `linecolor`      | String             | #2196F3  | 连线颜色                               |  
| `linewidth`      | Number             | 4        | 连线宽度                               |  
| `linedash`       | Array<Number>      | []       | 虚线样式，如 `[4, 2]`                  |  
| `correctpassword`| String             | null     | 正确密码（字符串或 MD5 值）            |  
| `md5`            | Boolean            | false    | 启用 MD5 校验（需引入 `md5.min.js`）   |  
| `onsuccess`      | Function/String    | null     | 解锁成功回调                           |  
| `onfail`         | Function/String    | null     | 解锁失败回调                           |  

---

## 📦 API 方法  

- `Wired.enable(selector);`   // 启用组件（用于 HTML 属性方式）  
- `Wired.disable(selector);`  // 销毁组件  
- `Wired.boot();`             // 批量启用所有 `wired` 标签（页面加载时自动执行）  

---

## 🔔 自定义事件  

支持以下原生事件监听：  

```javascript  
element.addEventListener('unlock-success', e => {  
  console.log('✅ 解锁成功:', e.detail);  
});  

element.addEventListener('unlock-fail', e => {  
  console.log('❌ 解锁失败:', e.detail);  
});  
```

---

## 🌐 浏览器兼容性  

| 浏览器           | 状态               |  
|------------------|--------------------|  
| Chrome           | ✅ 支持            |  
| Firefox          | ✅ 支持            |  
| Safari           | ✅ 支持            |  
| Edge (Chromium)  | ✅ 支持            |  
| 移动浏览器       | ✅ 支持触控        |  
| IE 11            | ❌ 不支持          |  

> 如需兼容老旧浏览器（如 IE11），请自行引入 polyfill（如 `CustomEvent`、`classList` 等）。  

---

## 📒 更新日志  

**v1.1.1**  
- ✅ 修复事件重复触发的 Bug  
- ✅ MD5 加密逻辑优化
- ✅ 支持 JS 与 HTML 两种用法  
- ✅ 优化交互体验  

---

Made with ❤️ and JavaScript.