mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
61 lines (60 loc) • 2.23 kB
JavaScript
import { defineComponent as w, useModel as B, computed as C, watch as V, openBlock as p, createElementBlock as c, normalizeClass as g, unref as l, withDirectives as b, createElementVNode as M, vModelText as k, toDisplayString as x, createCommentVNode as D, mergeModels as h } from "vue";
import { useTextarea as E } from "./hooks.js";
import { name as r } from "./config.js";
const F = ["cols", "rows", "readonly", "disabled", "maxlength", "placeholder"], z = /* @__PURE__ */ w({
name: r,
__name: "index",
props: /* @__PURE__ */ h({
cols: {},
rows: { default: 6 },
readonly: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
maxlength: { default: -1 },
placeholder: { default: "请输入" },
showCount: { type: Boolean, default: !1 }
}, {
modelValue: { default: "" },
modelModifiers: {}
}),
emits: /* @__PURE__ */ h(["focus", "blur", "change", "input"], ["update:modelValue"]),
setup(d, { emit: v }) {
const y = v, t = d, a = B(d, "modelValue"), { onFocus: u, onBlur: m, onChange: i, onInput: f } = E(y), n = C(() => t.maxlength >= 0 ? t.maxlength : 9999999);
return V(
a,
(s) => {
s && (s.length < n.value || (a.value = s.slice(0, n.value)));
},
{ immediate: !0 }
), (s, e) => (p(), c("div", {
class: g(l(r))
}, [
b(M("textarea", {
"onUpdate:modelValue": e[0] || (e[0] = (o) => a.value = o),
cols: d.cols,
rows: t.rows,
readonly: t.readonly,
disabled: t.disabled,
maxlength: n.value,
placeholder: t.placeholder,
class: "textarea",
onFocus: e[1] || (e[1] = //@ts-ignore
(...o) => l(u) && l(u)(...o)),
onBlur: e[2] || (e[2] = //@ts-ignore
(...o) => l(m) && l(m)(...o)),
onChange: e[3] || (e[3] = //@ts-ignore
(...o) => l(i) && l(i)(...o)),
onInput: e[4] || (e[4] = //@ts-ignore
(...o) => l(f) && l(f)(...o))
}, null, 40, F), [
[k, a.value]
]),
t.showCount ? (p(), c("div", {
key: 0,
class: g(`${l(r)}__count`)
}, x(a.value.length) + " / " + x(n.value), 3)) : D("", !0)
], 2));
}
});
export {
z as default
};