epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
76 lines (75 loc) • 2.19 kB
JavaScript
import { defineComponent as V, computed as g, createElementBlock as l, openBlock as a, createElementVNode as p, Fragment as k, renderList as C, createVNode as m, createCommentVNode as y, unref as c } from "vue";
/* empty css */
import U from "../../../../base-ui/src/icon/icon.vue2.js";
import { getUUID as P } from "../../../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { pluginManager as b } from "../../../../../utils/src/manager/pluginManager.js";
import "vuedraggable";
const E = {
key: 0,
class: "epic-del-btn"
}, N = ["onClick"], F = /* @__PURE__ */ V({
__name: "index",
props: {
modelValue: {
default: () => [],
type: Array
}
},
emits: ["update:modelValue"],
setup(s, { emit: u }) {
const d = s, i = u, v = b.getComponent("number"), t = g({
get() {
return d.modelValue;
},
set(e) {
i("update:modelValue", e);
}
});
function f() {
const e = {
componentProps: {
span: 12
},
id: P(),
type: "col",
children: []
};
t.value.push(e);
}
function _(e) {
t.value = t.value.filter((h, o) => e !== o);
}
return (e, h) => (a(), l("div", null, [
(a(!0), l(k, null, C(t.value, (o, r) => (a(), l("div", {
key: r,
class: "EColEditor-item"
}, [
m(c(v), {
value: o.componentProps.span,
"onUpdate:value": (n) => o.componentProps.span = n,
modelValue: o.componentProps.span,
"onUpdate:modelValue": (n) => o.componentProps.span = n,
style: { width: "100%" },
min: 1,
max: 24
}, null, 8, ["value", "onUpdate:value", "modelValue", "onUpdate:modelValue"]),
t.value.length > 1 ? (a(), l("div", E, [
p("span", {
onClick: (n) => _(r)
}, [
m(c(U), { name: "icon-shanchu1" })
], 8, N)
])) : y("", !0)
]))), 128)),
p("div", {
class: "add-btn",
onClick: f
}, "添加")
]));
}
});
export {
F as default
};