uv-ui/es/components/signature/signature.js

基于vue3的移动端组件库

import { ref as p, reactive as k, onMounted as C, openBlock as E, createElementBlock as _, normalizeStyle as b, createElementVNode as r, renderSlot as B, toDisplayString as m } from "vue";
import { useRect as R } from "../../hooks/useRect.js";
import "../../hooks/useCountDown.js";
import "./signature.vue_vue_type_style_index_0_lang.js";
const D = ["width", "height"], U = { class: "uv-signature-footer" }, W = {
  name: "UvSignature"
}, N = Object.assign(W, {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "200px"
    },
    lineWidth: {
      type: Number,
      default: 3
    },
    penColor: {
      type: String,
      default: "#000"
    },
    exportImgType: {
      type: String,
      default: "png"
    },
    clearButtonText: {
      type: String,
      default: "\u6E05\u7A7A"
    },
    confirmButtonText: {
      type: String,
      default: "\u786E\u8BA4"
    }
  },
  emits: ["start", "signing", "end", "clear", "submit"],
  setup(s, { expose: x, emit: c }) {
    const a = s, u = p(null), l = p(null), t = k({
      width: 0,
      height: 0,
      ctx: null
    });
    let o = "";
    C(() => {
      var e, n, i;
      t.ctx = (e = l.value) == null ? void 0 : e.getContext("2d"), t.width = ((n = u.value) == null ? void 0 : n.offsetWidth) || 0, t.height = ((i = u.value) == null ? void 0 : i.offsetHeight) || 0;
    });
    const y = () => {
      if (!t.ctx)
        return !1;
      t.ctx.beginPath(), t.ctx.lineWidth = a.lineWidth, t.ctx.strokeStyle = a.penColor, o = R(l), c("start");
    }, v = (e) => {
      var f, g;
      if (!t.ctx)
        return !1;
      const n = e.touches[0], i = n.clientX - ((o == null ? void 0 : o.left) || 0), T = n.clientY - ((o == null ? void 0 : o.top) || 0);
      t.ctx.lineCap = "round", t.ctx.lineJoin = "round", (f = t.ctx) == null || f.lineTo(i, T), (g = t.ctx) == null || g.stroke(), c("signing", e);
    }, S = (e) => {
      c("end");
    }, h = () => {
      t.ctx && (t.ctx.clearRect(0, 0, t.width, t.height), t.ctx.closePath()), c("clear");
    }, w = (e) => {
      const n = document.createElement("canvas");
      return n.width = e.width, n.height = e.height, e.toDataURL() === n.toDataURL();
    }, d = () => {
      const e = l.value;
      if (!e)
        return;
      const i = w(e) ? "" : e.toDataURL(
        `image/${a.exportImgType}`,
        a.exportImgType === "jpg" ? 0.9 : null
      );
      c("submit", {
        image: i,
        canvas: e
      });
    };
    return x({
      clear: h,
      submit: d
    }), (e, n) => (E(), _("div", {
      class: "uv-signature",
      style: b({ height: s.height })
    }, [
      r("div", {
        class: "uv-signature-content",
        ref_key: "wrapRef",
        ref: u
      }, [
        r("canvas", {
          ref_key: "canvasRef",
          ref: l,
          width: t.width,
          height: t.height,
          onTouchstart: y,
          onTouchmove: v,
          onTouchend: S
        }, null, 40, D)
      ], 512),
      B(e.$slots, "footer", {}, () => [
        r("div", U, [
          r("div", {
            class: "uv-signature-footer-clear",
            onClick: h
          }, m(s.clearButtonText), 1),
          r("div", {
            class: "uv-signature-footer-confim",
            onClick: d
          }, m(s.confirmButtonText), 1)
        ])
      ])
    ], 4));
  }
});
export {
  N as default
};