mu-fake-input/dist/mu-fake-input.js

vue3验证码输入框组件

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".fake-input[data-v-86aa1d8b]{display:flex}.fake-input .input-style[data-v-86aa1d8b]{box-sizing:border-box}.fake-input .input-style input[data-v-86aa1d8b]{border:none;box-sizing:border-box;color:#606266;text-align:center;outline:none}.fake-input .input-style--state[data-v-86aa1d8b]{border-color:#409eff}.input-style_frame[data-v-86aa1d8b]{border:1px solid #b9b9b9;border-radius:4px;overflow:hidden}.input-style_line[data-v-86aa1d8b]{border-bottom:1px solid #b9b9b9}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as N, ref as y, computed as E, watch as I, onMounted as b, createElementBlock as d, openBlock as _, Fragment as q, renderList as A, normalizeStyle as w, normalizeClass as B, withDirectives as F, createElementVNode as S, vModelText as L } from "vue";
const M = { class: "fake-input" }, R = ["onUpdate:modelValue", "onKeyup", "onKeydown", "onClick"], U = /* @__PURE__ */ N({
  __name: "FakeInput",
  props: {
    quantity: { default: 6 },
    modelValue: {},
    type: { default: "frame" },
    config: {},
    inputKeys: { default: "all" }
  },
  emits: ["update:modelValue"],
  setup(p, { emit: v }) {
    const u = p, m = v, n = y(), o = y([]), $ = E({
      get() {
        return u.modelValue;
      },
      set(t) {
        m("update:modelValue", t);
      }
    });
    I(
      () => o.value,
      (t) => {
        let e = "";
        t.forEach((l) => {
          l.value && (e += l.value);
        }), $.value = e;
      },
      {
        deep: !0
      }
    ), I(
      () => u.modelValue,
      () => {
        V();
      }
    );
    const g = y(), c = (t) => {
      g.value = t;
    }, k = (t) => {
      const e = t;
      e === 0 ? (n.value[e].focus(), c(e)) : o.value[e - 1].value === "" ? k(e - 1) : (n.value[e].focus(), c(e));
    }, h = (t) => {
      const e = t.key, l = /^[a-zA-Z]$/.test(e), a = /^[0-9]$/.test(e);
      switch (u.inputKeys) {
        case "all":
          return l || a;
        case "letter":
          return l;
        case "numeric":
          return a;
      }
    }, C = (t, e) => {
      const l = n.value, a = l[e], i = l[e + 1], f = l[e - 1];
      if (h(t))
        e < Number(u.quantity) - 1 && o.value[e].value !== "" ? (i.focus(), c(e + 1)) : (a.focus(), c(e));
      else if (t.key === "Backspace")
        e != 0 && o.value[e].value === "" && (f.focus(), c(e - 1));
      else {
        const r = t.target;
        r.value = r.value.replace(
          /./g,
          ""
        ), o.value[e].value = "";
      }
    }, z = (t, e) => {
      h(t) && (o.value[e].value = t.key);
    }, V = () => {
      o.value = [];
      for (let t = 0; t < Number(u.quantity); t++)
        o.value.push({
          value: u.modelValue[t] ? u.modelValue[t] : ""
        });
    };
    return b(() => {
      V();
    }), (t, e) => (_(), d("div", M, [
      (_(!0), d(q, null, A(o.value, (l, a) => {
        var i, f, r, K;
        return _(), d("div", {
          class: B([
            "input-style",
            `input-style_${u.type}`,
            a === g.value ? "input-style--state" : ""
          ]),
          style: w({
            margin: `0px ${((i = u.config) == null ? void 0 : i.spacing) ?? 5}px`
          }),
          key: a
        }, [
          F(S("input", {
            ref_for: !0,
            ref_key: "inputRef",
            ref: n,
            style: w({
              width: `${((f = u.config) == null ? void 0 : f.width) ?? 40}px`,
              height: `${((r = u.config) == null ? void 0 : r.height) ?? 50}px`,
              fontSize: `${((K = u.config) == null ? void 0 : K.fontSize) ?? 16}px`
            }),
            type: "text",
            "onUpdate:modelValue": (s) => l.value = s,
            maxlength: "1",
            onKeyup: (s) => C(s, a),
            onKeydown: (s) => z(s, a),
            onClick: (s) => k(a)
          }, null, 44, R), [
            [L, l.value]
          ])
        ], 6);
      }), 128))
    ]));
  }
}), D = (p, v) => {
  const u = p.__vccOpts || p;
  for (const [m, n] of v)
    u[m] = n;
  return u;
}, T = /* @__PURE__ */ D(U, [["__scopeId", "data-v-86aa1d8b"]]);
export {
  T as FakeInput,
  T as default
};