学习通签到

要在Vue中使用H5lock.js，首先需要将H5lock.js引入到项目中。可以通过以下步骤来使用：

1. 将H5lock.js文件保存到项目中的某个目录下，例如src/assets文件夹。

2. 在需要使用H5lock.js的组件中，通过import语句将H5lock.js引入进来，例如：

import H5lock from '@/assets/H5lock.js';

3. 在组件的methods中定义相关的方法来调用H5lock.js的功能，例如：

methods: {
  drawLock() {
    const canvas = this.$refs.canvas;
    const h5lock = new H5lock(canvas, {
      onDraw: (password) => {
        // 在这里可以处理绘制完成后的逻辑
        console.log('密码为：', password);
      }
    });
    h5lock.init();
  }
}

4. 在组件的模板中添加一个canvas元素，用于绘制手势密码。例如：

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="drawLock">绘制手势密码</button>
  </div>
</template>

在以上代码中，点击按钮时会调用drawLock方法来初始化H5lock实例，并将初始化时的配置传入，例如onDraw回调函数用于接收绘制完成后的密码。canvas元素使用ref属性来获取对应的DOM节点，以便在方法中使用。

注意：在使用H5lock.js时，需要确保相关的依赖已经引入，例如hammer.js和jquery。可以通过npm或者其他方式将这些依赖引入到项目中。具体的引入方式可以参考H5lock.js的官方文档。