H5HandLock

功能描述

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

依赖插件

无

快速使用

<div id="handlock"></div>

var handLock = new HandLock({
    el: document.getElementById('handlock'),
    n: 3,
    minLength: 4,
    // pass: [0, 1, 2, 3, 4, 5],
    // strokeColor: '#ffa726',
    // fillColor: '#ffa726',
    // successColor: '#2CFF26',
    // errorColor: 'red',
})
handLock.on('msg', function (e) {
    if (e.code === 200) {
        // 成功
    } else {
        // 不成功
    }
})
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

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

checkPass

handLock.checkPass()

特别说明

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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18