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