电子手写签名(esignature)

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

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

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