gepic
Version:
基于vue3的设计器,可视化开发页面表单
67 lines (66 loc) • 2.19 kB
JavaScript
import { defineComponent as c, ref as o, watch as p, nextTick as g, createBlock as w, openBlock as U, unref as v, withCtx as y, createVNode as C } from "vue";
import { pluginManager as r } from "../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import "../../../hooks/store/index.js";
const S = /* @__PURE__ */ c({
__name: "index",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(m, { emit: i }) {
const d = r.getComponent("input"), s = r.getComponent("select"), f = m, x = i, e = o(null), a = o("px"), V = [
{ label: "px", value: "px" },
{ label: "%", value: "%" },
{ label: "vw", value: "vw" },
{ label: "vh", value: "vh" },
{ label: "rem", value: "rem" },
{ label: "em", value: "em" },
{ label: "pt", value: "pt" }
];
p(() => f.modelValue, (t) => {
if (!t) return;
if (typeof t == "number") {
e.value = String(t), a.value = "px";
return;
}
const l = parseFloat(t);
if (isNaN(l))
return e.value = null, !1;
const u = /^(\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt){1}$/, n = t.trim().match(u);
e.value = (n == null ? void 0 : n[1]) ?? null, a.value = (n == null ? void 0 : n[3]) ?? "";
}, {
immediate: !0
}), p(() => a.value + e.value, () => {
b();
});
function b() {
g(() => x("update:modelValue", e.value ? e.value + a.value : void 0));
}
return (t, l) => (U(), w(v(d), {
modelValue: e.value,
"onUpdate:modelValue": l[2] || (l[2] = (u) => e.value = u),
value: e.value,
"onUpdate:value": l[3] || (l[3] = (u) => e.value = u),
class: "epic-input-size",
type: "number",
min: "0",
placeholder: "请输入"
}, {
suffix: y(() => [
C(v(s), {
value: a.value,
"onUpdate:value": l[0] || (l[0] = (u) => a.value = u),
modelValue: a.value,
"onUpdate:modelValue": l[1] || (l[1] = (u) => a.value = u),
style: { width: "68px" },
options: V
}, null, 8, ["value", "modelValue"])
]),
_: 1
}, 8, ["modelValue", "value"]));
}
});
export {
S as default
};