mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
97 lines (96 loc) • 3.85 kB
JavaScript
import { defineComponent as S, useModel as z, openBlock as a, createElementBlock as u, normalizeClass as I, normalizeStyle as m, createBlock as f, createCommentVNode as c, createTextVNode as T, toDisplayString as B, withDirectives as D, createElementVNode as F, unref as l, vModelDynamic as L, mergeModels as $ } from "vue";
import r from "../MeIcon/index.vue.js";
import { useSms as N, useInput as A, useIcon as E } from "./hooks.js";
const W = ["type", "placeholder", "minlength", "maxlength", "readonly", "disabled"], G = /* @__PURE__ */ S({
name: "MeInput",
__name: "index",
props: /* @__PURE__ */ $({
type: { default: "text" },
placeholder: { default: "请输入..." },
readonly: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
label: { default: "" },
labelWidth: { default: "" },
labelAlign: { default: "left" },
labelColor: { default: "" },
labelIcon: { default: "" },
focusType: { default: "default" },
focusColor: { default: "" },
icon: { default: "" },
password: { type: Boolean, default: !1 },
digit: { type: Boolean, default: !1 },
smsMsg: { default: "" },
smsColor: { default: "" },
smsIs: { type: Boolean, default: !1 },
maxlength: { default: 999 },
minlength: { default: 0 }
}, {
modelValue: { default: "" },
modelModifiers: {}
}),
emits: /* @__PURE__ */ $(["focus", "blur", "change", "input", "click-sms", "click-icon"], ["update:modelValue"]),
setup(e, { emit: M }) {
const o = M, d = e, i = z(e, "modelValue"), { sms: y, handleSMS: g } = N(d, o), { inputLabel: V, inputType: s, paddingLeft: p, paddingRight: w, isFocus: v, onFocus: b, onBlur: k, onChange: C, onInput: h } = A({ props: d, emit: o, sms: y, inputVal: i }), { handleIcon: x } = E(d, o, s);
return (R, n) => (a(), u("div", {
class: I(["me-input", `me-input-${e.focusType}`])
}, [
e.label ? (a(), u("div", {
key: 0,
ref_key: "inputLabel",
ref: V,
class: "label",
style: m(`width:${e.labelWidth};text-align-last:${e.labelAlign};color:${e.labelColor};`)
}, [
e.labelIcon ? (a(), f(r, {
key: 0,
name: e.labelIcon,
color: e.labelColor,
size: "inherit"
}, null, 8, ["name", "color"])) : c("", !0),
T(" " + B(e.label), 1)
], 4)) : c("", !0),
D(F("input", {
"onUpdate:modelValue": n[0] || (n[0] = (t) => i.value = t),
type: l(s),
class: "input",
placeholder: e.placeholder,
style: m(`${l(v) && `border-color:${e.focusColor};`};padding-right:${l(w)}px;padding-left:${l(p)}px;`),
minlength: e.minlength,
maxlength: e.maxlength,
readonly: e.readonly,
disabled: e.disabled,
onFocus: n[1] || (n[1] = //@ts-ignore
(...t) => l(b) && l(b)(...t)),
onBlur: n[2] || (n[2] = //@ts-ignore
(...t) => l(k) && l(k)(...t)),
onChange: n[3] || (n[3] = //@ts-ignore
(...t) => l(C) && l(C)(...t)),
onInput: n[4] || (n[4] = //@ts-ignore
(...t) => l(h) && l(h)(...t))
}, null, 44, W), [
[L, i.value]
]),
e.password ? (a(), f(r, {
key: 1,
name: l(s) == "password" ? "icon-in_biyan" : "icon-in_zhengyan",
onClick: l(x)
}, null, 8, ["name", "onClick"])) : (a(), f(r, {
key: 2,
name: e.icon,
onClick: l(x)
}, null, 8, ["name", "onClick"])),
!e.password && e.smsMsg ? (a(), u("span", {
key: 3,
ref_key: "sms",
ref: y,
class: I(["sms", { countdown: e.smsIs }]),
style: m(`color:${e.smsColor};`),
onClick: n[5] || (n[5] = //@ts-ignore
(...t) => l(g) && l(g)(...t))
}, B(e.smsMsg), 7)) : c("", !0)
], 2));
}
});
export {
G as default
};