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/07/31