@meleon/lock NPM

Description

实现九宫格锁屏效果，可以在 PC 或 H5 中使用

Installation

npm install @meleon/lock

Options

Field	Feat.	Type
chooseType	设置点阵数量	3 \| 4 \| 5【default: 3】
mode	解锁模式或设置密码模式	GestureLockMode
canvasId	绘制canvas的容器ID	String
titleId	填入描述信息的容器ID	String
width	canvas容器的宽度	Number【default: 320】
height	canvas容器的高度	Number【default: 320】
colorMap	自定义不同状态的颜色	Partial

Example

在 Vue3 项目中使用

import { defineComponent, onMounted, ref } from 'vue'
import { GestureLock, GestureLockMode, GestureEvents } from '@meleon/lock'
import style from './index.module.less'

export default defineComponent({
  setup() {
    const lockInstance = ref<GestureLock>()
    onMounted(() => {
      // 初始化 GestureLock 实例
      lockInstance.value = lock = new GestureLock({
        chooseType: 3,
        mode: GestureLockMode.INPUT_PASSWORD,
        canvasId: 'gesture-canvas',
        titleId: 'gesture-title',
        width: 300,
        height: 300,
        colorMap: {
          '--primary-color': '#175fff'
        },
      })
      
      // 设置密码
      lockInstance.value.setPassword('1235789')
        
      // 监听响应事件
      lockInstance.value.on(GestureEvents.PASS, (val: string) => {
        console.log('passed value', val)
      })
      lockInstance.value.on(GestureEvents.SETTLE, (val: string) => {
        console.log('settled value', val)
      })
      lockInstance.value.on(GestureEvents.VERIFY_FAILED, (val: string) => {
        console.log('failed value', val)
      })
    })

    return () => (
      <div class={style['test-wrapper']}>
        <div class={style['test-wrapper-frame']}>
          <div id="gesture-title" class={style['test-wrapper-frame--title']}></div>
          <div class={style['test-wrapper-frame--content']}>
            <canvas id="gesture-canvas"></canvas>
          </div>
        </div>
      </div>
    )
  }
})