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>
    )
  }
})

License

MIT

Keywords

web app lock meleon