@coderlt/form-designer/dist/index-7db4a1be.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as h, computed as V, openBlock as n, createElementBlock as o, Fragment as b, renderList as g, createVNode as d, unref as r, createElementVNode as s, createCommentVNode as k } from "vue";
import { p as C, g as y } from "./index-74b7090f.js";
import { _ as U } from "./icon.vue_vue_type_script_setup_true_lang-3f9e4127.js";
const E = {
  key: 0,
  class: "del-btn"
}, I = ["onClick"], B = /* @__PURE__ */ h({
  __name: "index",
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(c, { emit: p }) {
    const i = c, m = C.getComponent("input"), l = V({
      get() {
        return i.modelValue;
      },
      set(e) {
        p("update:modelValue", e);
      }
    });
    function v() {
      const e = {
        label: "标签页",
        type: "tab-pane",
        children: [],
        id: y()
      };
      l.value.push(e);
    }
    function _(e) {
      l.value = l.value.filter((f, t) => e !== t);
    }
    return (e, f) => (n(), o("div", null, [
      (n(!0), o(b, null, g(l.value, (t, u) => (n(), o("div", {
        key: u,
        class: "EColEditor-item"
      }, [
        d(r(m), {
          value: t.label,
          "onUpdate:value": (a) => t.label = a,
          modelValue: t.label,
          "onUpdate:modelValue": (a) => t.label = a,
          style: { width: "100%" }
        }, null, 8, ["value", "onUpdate:value", "modelValue", "onUpdate:modelValue"]),
        l.value.length > 1 ? (n(), o("div", E, [
          s("span", {
            onClick: (a) => _(u)
          }, [
            d(r(U), { name: "icon-shanchu" })
          ], 8, I)
        ])) : k("", !0)
      ]))), 128)),
      s("div", {
        class: "add-btn",
        onClick: v
      }, " 添加 ")
    ]));
  }
});
export {
  B as default
};