esignature v0.1.0

Vue 3 的电子手写签名hooks

适配移动和pc端, 从vue2组件的方式变更为vue最新的hooks方式, 旨在更好的兼容 VUE 组合式API, 更好的对调用者暴露可选操作;

调用 hook 时的可选项说明

用例

iimport { defineComponent, ref } from "vue";
import './index.scss';
import { useSign } from "../hook";

export default defineComponent({
  setup() {
    const src = ref<string>();
    const canvas = ref<HTMLCanvasElement>();
    // 调用电子签名的hooks
    const sign = useSign(canvas);;

    const preview = () => {
      src.value = sign.getData();
    }
    return () => (
      <>
        <div class="e-sign">
          <canvas style='width:100%' ref={canvas} />
        </div>
        <div class="option">
          <button type="button" onClick={sign.undo}>撤销</button>
          <button type="button" onClick={sign.changePenColor}>颜色</button >
          <button type="button" onClick={sign.clear}> 重置</button >
          <button type="button" onClick={sign.save}> 保存</button >
          <button type="button" onClick={preview}> 预览</button>
        </div>
        <div class="e-sign">
          <img src={src.value} alt="preview" />
        </div>
      </>
    );
  }
});

/* index.scss */
.e-sign {
  display: flex;
  height: 9rem;
  border: 1px solid #d7d7d7;
  border-radius: 4px;

  img {
    width: 100%;
    object-fit: contain;
  }
}

.option {
  margin: 5px 0;
  display: flex;
  justify-content: space-around;
}