mine-h5-ui/es/MePassword/hooks.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { ref as k, watch as f, onMounted as b, onUnmounted as g } from "vue";
import { Bind as E, Unbind as A } from "../MeAPI/event.js";
const F = ({ props: s, emit: n, modelValue: c }) => {
  const u = c.value.slice(0, s.num);
  c.value = u;
  const r = u.split(""), a = k(Array.from({ length: s.num }, (e, l) => ({ id: l + 1, value: r[l] || "", state: !1 }))), i = (e) => {
    let l = !0;
    for (const t of a.value)
      if (t.state) {
        l = !1, t.state = !1;
        break;
      }
    if (l) {
      for (const t of a.value)
        if (t.value === "") {
          t.state = !0;
          break;
        }
      n("focus", e);
    } else
      n("blur", e);
  }, v = () => {
    const e = c.value.slice(0, s.num);
    c.value = e;
    const l = e.split("");
    a.value.forEach((h, d) => {
      h.value = l[d] || "";
    });
    const t = l.length;
    t !== s.num && (a.value[t].state = !0), t > 0 && (a.value[t - 1].state = !1), t < s.num - 1 && (a.value[t + 1].state = !1);
  }, m = () => {
    a.value.forEach((e) => {
      e.state = !1;
    });
  }, o = () => {
    a.value.forEach((e) => {
      e.state = !1;
    });
  };
  return f(c, v), f(
    () => s.isFocus,
    (e) => {
      !e && m();
    }
  ), b(() => {
    E(document, "click", o);
  }), g(() => {
    A(document, "click", o);
  }), { listData: a, handleClick: i };
};
export {
  F as useHandler
};