H5HandLock

功能描述

H5HandLock是纯原生js手势密码组件，仅12kb（未压缩）

依赖模块

无

快速使用

  1. <div id="handlock"></div>
  1. var handLock = new HandLock({
  2.     el: document.getElementById('handlock'),
  3.     n: 3,
  4.     minLength: 4,
  5.     // pass: [0, 1, 2, 3, 4, 5],
  6.     // strokeColor: '#ffa726',
  7.     // fillColor: '#ffa726',
  8.     // successColor: '#2CFF26',
  9.     // errorColor: 'red',
  10. })
  11. handLock.on('msg', function (e) {
  12.     if (e.code === 200) {
  13.         // 成功
  14.     } else {
  15.         // 不成功
  16.     }
  17. })
  18. handLock.init();

配置项

el

  • 类型：HTMLElement
  • 默认值：null
  • 作用：手势密码绘制区
  • 是否必传：是

n

  • 类型：Number
  • 默认值：3
  • 作用：绘制几x几的圆形
  • 是否必传：否

minLength

  • 类型：Number
  • 默认值：5
  • 作用：至少绘制几个圆形
  • 是否必传：否

pass

  • 类型：Array
  • 默认值：无
  • 作用：初始密码
  • 是否必传：否

strokeColor

  • 类型：String
  • 默认值：#ffa726
  • 作用：圆形边框及连线颜色

  • 是否必传：否

    fillColor

  • 类型：String

  • 默认值：#ffa726
  • 作用：圆形填充颜色

  • 是否必传：否

    successColor

  • 类型：String

  • 默认值：#2CFF26
  • 作用：成功时，圆形边框颜色

  • 是否必传：否

    errorColor

  • 类型：String

  • 默认值：red
  • 作用：错误时，圆形边框颜色
  • 是否必传：否

方法

on

  1. handLock.on('msg', function (e) {
  2.     console.log('msg', e)
  3. })

checkPass

  1. handLock.checkPass()

特别说明

更多配置和用法，请参考examples