iking-image-valid/dist/ikingimagevalid.es.js

金合前端组件 - 1.0.5添加props可自定义验证码颜色

import { defineComponent as _, computed as L, ref as P, onMounted as S, openBlock as $, createElementBlock as D, createElementVNode as T } from "vue";
const I = /* @__PURE__ */ _({
  __name: "iking-image-valid",
  props: {
    option: {
      type: Object
    }
  },
  emits: ["change"],
  setup(d, { expose: k, emit: v }) {
    const M = d, b = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], p = [
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
      "O",
      "P",
      "Q",
      "R",
      "S",
      "T",
      "U",
      "V",
      "W",
      "X",
      "Y",
      "Z"
    ], F = p.map((t) => t.toLowerCase()), f = [...p, ...F], w = {
      width: 100,
      height: 36,
      size: 20,
      line: !0,
      lineNum: 4,
      num: 4,
      type: "number",
      useCase: !1,
      background: "#eee",
      rote: !0,
      point: !0,
      pointNum: 80,
      codeColor: ["#393939", "#101655", "#0B476F", "#06CA3F", "#560D69"]
    }, m = L(() => ({
      ...w,
      ...M.option
    })), u = P(null), o = (t) => Math.floor(Math.random() * t), g = () => `rgba(${o(256)}, ${o(256)}, ${o(256)}, ${8})`, x = () => {
      let t = "";
      const { type: n, num: l } = m.value;
      if (n === "number")
        for (let i = 0; i < l; i++)
          t += (Math.random() * 9).toFixed(0);
      else if (n === "letter") {
        const i = f.length;
        for (let a = 0; a < l; a++)
          t += f[Math.floor(Math.random() * (i - 1))];
      } else {
        const i = [...f, ...b], a = i.length;
        for (let c = 0; c < l; c++)
          t += i[Math.floor(Math.random() * (a - 1))];
      }
      return v("change", t), t;
    }, h = () => {
      if (!u.value)
        throw new Error("\u9A8C\u8BC1\u7801\u6E32\u67D3\u8282\u70B9\u672A\u627E\u5230\uFF01");
      const t = x(), {
        width: n,
        height: l,
        background: i,
        size: a,
        line: c,
        lineNum: A,
        point: E,
        pointNum: B,
        num: C
      } = m.value;
      if (!n || !C || !l)
        return;
      const N = Math.floor(n / C);
      u.value.setAttribute("width", n + ""), u.value.setAttribute("height", l + "");
      const e = u.value.getContext("2d");
      if (!e)
        return;
      e.fillStyle = i, e.fillRect(0, 0, n, l), e.textBaseline = "middle";
      const s = m.value.codeColor || [];
      for (let r = 0; r < t.length; r++)
        e.fillStyle = s[Math.floor((s == null ? void 0 : s.length) - 1)], e.font = `bold ${a}px \u5FAE\u8F6F\u96C5\u9ED1`, e.fillText(
          t.charAt(r),
          N * (r || o(1)),
          l / 2 + o(10)
        );
      if (c)
        for (let r = 0; r < A; r++)
          e.strokeStyle = g(), e.moveTo(o(n), o(l)), e.lineTo(o(n), o(l)), e.lineWidth = 1, e.stroke();
      if (E)
        for (let r = 0; r < B; r++)
          e.fillStyle = g(), e.beginPath(), e.arc(o(n), o(l), 1, 0, 2 * Math.PI), e.fill();
    };
    S(() => {
      h();
    }), k({ drawCode: h });
    const y = () => {
      h();
    };
    return (t, n) => ($(), D("div", null, [
      T("canvas", {
        class: "codeCanvas",
        ref_key: "checkCode",
        ref: u,
        onClick: y
      }, null, 512)
    ]));
  }
}), V = (d) => {
  d.component("ikingImageValid", I);
}, O = {
  install: V
};
export {
  I as default,
  O as installed
};