epic-designer-gold
Version:
基于vue3的设计器,可视化开发页面表单
60 lines (59 loc) • 2.31 kB
JavaScript
import { defineComponent as b, openBlock as d, createElementBlock as r, createElementVNode as g, Fragment as U, renderList as h, unref as t, createVNode as n, withCtx as C, createTextVNode as k, reactive as B } from "vue";
import { u as N } from "./index-NT_HkNlB.js";
import { p as c } from "./pluginManager-BNLy8dPz.js";
import { _ as $ } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const I = { class: "validate-param" }, M = { class: "option-item text-16px grid text-$epic-text-secondary gap-2 items-center mb-2 grid-cols-[auto_auto_16px]" }, w = /* @__PURE__ */ b({
__name: "index",
props: {
modelValue: {}
},
emits: ["update:modelValue"],
setup(s, { emit: i }) {
const p = s, v = i, _ = c.getComponent("button"), m = c.getComponent("input"), a = N(p, "modelValue", v);
function f() {
const o = B({
label: "",
value: ""
});
a.value = [...a.value, o];
}
function V(o) {
a.value = a.value.filter((u, e) => e !== o);
}
return (o, u) => (d(), r("div", I, [
g("div", null, [
(d(!0), r(U, null, h(t(a), (e, x) => (d(), r("div", M, [
n(t(m), {
modelValue: e.label,
"onUpdate:modelValue": (l) => e.label = l,
value: e.label,
"onUpdate:value": (l) => e.label = l,
placeholder: "label"
}, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
n(t(m), {
modelValue: e.value,
"onUpdate:modelValue": (l) => e.value = l,
value: e.value,
"onUpdate:value": (l) => e.value = l,
placeholder: "value"
}, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
n(t($), {
onClick: (l) => V(x),
class: "hover:text-red cursor-pointer",
name: "icon--epic--delete-outline-rounded"
}, null, 8, ["onClick"])
]))), 256)),
n(t(_), { onClick: f }, {
default: C(() => [...u[0] || (u[0] = [
k("添加选项", -1)
])]),
_: 1
})
])
]));
}
}), T = /* @__PURE__ */ E(w, [["__scopeId", "data-v-a32a3b5f"]]);
export {
T as default
};