vue3-signature-panel/dist/vue3-signature-panel.mjs

canvas签名面板组件

import { ref as u, onMounted as C, openBlock as T, createElementBlock as k, createElementVNode as i, toDisplayString as x } from "vue";
const S = (l, r) => {
  const n = l.__vccOpts || l;
  for (const [s, c] of r)
    n[s] = c;
  return n;
}, D = { class: "signature-container" }, X = ["width", "height"], Y = { class: "signature-actions" }, M = {
  name: "SignaturePanel"
}, R = /* @__PURE__ */ Object.assign(M, {
  props: {
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 200
    },
    lineWidth: {
      type: Number,
      default: 2
    },
    lineColor: {
      type: String,
      default: "#000000"
    },
    generateText: {
      type: String,
      default: "生成图片"
    }
  },
  emits: ["generate"],
  setup(l, { emit: r }) {
    const n = l, s = u(null), c = u(!1), f = u(0), d = u(0);
    let o = null;
    C(() => {
      o = s.value.getContext("2d"), o.lineWidth = n.lineWidth, o.strokeStyle = n.lineColor, o.lineCap = "round", o.lineJoin = "round";
    });
    const _ = (e) => {
      c.value = !0;
      const { offsetX: t, offsetY: a } = e;
      f.value = t, d.value = a;
    }, p = (e) => {
      if (!c.value)
        return;
      const { offsetX: t, offsetY: a } = e;
      o.beginPath(), o.moveTo(f.value, d.value), o.lineTo(t, a), o.stroke(), f.value = t, d.value = a;
    }, g = () => {
      c.value = !1;
    }, m = (e) => {
      e.preventDefault();
      const t = e.touches[0], a = s.value.getBoundingClientRect(), h = t.clientX - a.left, v = t.clientY - a.top;
      _({ offsetX: h, offsetY: v });
    }, y = (e) => {
      e.preventDefault();
      const t = e.touches[0], a = s.value.getBoundingClientRect(), h = t.clientX - a.left, v = t.clientY - a.top;
      p({ offsetX: h, offsetY: v });
    }, b = () => {
      o.clearRect(0, 0, n.width, n.height);
    }, w = () => {
      const e = s.value.toDataURL("image/png");
      r("generate", e);
    };
    return (e, t) => (T(), k("div", D, [
      i("canvas", {
        ref_key: "canvasRef",
        ref: s,
        width: n.width,
        height: n.height,
        onMousedown: _,
        onMousemove: p,
        onMouseup: g,
        onMouseleave: g,
        onTouchstart: m,
        onTouchmove: y,
        onTouchend: g
      }, null, 40, X),
      i("div", Y, [
        i("button", { onClick: b }, "清除"),
        i("button", { onClick: w }, x(n.generateText), 1)
      ])
    ]));
  }
}), N = /* @__PURE__ */ S(R, [["__scopeId", "data-v-1b763d65"]]);
export {
  N as SignaturePanel,
  N as default
};