🔐 Wired Pattern Lock

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

🚀 快速开始

使用 CDN

<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

npm i wired-pattern-lock  

模块引入方式

import Wired from 'wired-pattern-lock';  

✨ 两种用法

方式一：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 加密

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

方式二：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 | [] | 虚线样式，如 [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 标签（页面加载时自动执行）

🔔 自定义事件

支持以下原生事件监听：

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.