mine-h5-ui/es/MePassword/index.vue.js

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

import { defineComponent as p, useModel as y, withDirectives as k, openBlock as s, createElementBlock as o, withModifiers as w, unref as n, normalizeClass as r, Fragment as h, renderList as v, toDisplayString as C, createCommentVNode as M, vShow as V, mergeModels as d } from "vue";
import { useHandler as b } from "./hooks.js";
const g = { key: 0 }, x = {
  key: 1,
  class: "iconfont icon-dian"
}, S = /* @__PURE__ */ p({
  name: "MePassword",
  __name: "index",
  props: /* @__PURE__ */ d({
    type: { default: "password" },
    num: { default: 6 },
    skinType: { default: "white" },
    isFocus: { type: Boolean, default: !1 }
  }, {
    modelValue: { default: "" },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ d(["focus", "blur"], ["update:modelValue"]),
  setup(t, { emit: u }) {
    const m = u, c = t, f = y(t, "modelValue"), { listData: l, handleClick: a } = b({ props: c, emit: m, modelValue: f });
    return (B, i) => k((s(), o("ul", {
      class: r(["me-password", `me-password-${t.skinType}${t.type === "number" ? " me-password-number" : ""}`]),
      onClick: i[0] || (i[0] = w(
        //@ts-ignore
        (...e) => n(a) && n(a)(...e),
        ["stop"]
      ))
    }, [
      (s(!0), o(h, null, v(n(l), (e) => (s(), o("li", {
        key: e.id,
        class: r({ active: e.state })
      }, [
        t.type === "number" ? (s(), o("span", g, C(e.value), 1)) : e.value !== "" ? (s(), o("i", x)) : M("", !0)
      ], 2))), 128))
    ], 2)), [
      [V, n(l).length > 0]
    ]);
  }
});
export {
  S as default
};