form-designer-xinyi/dist/index-dQlLsl9c.js

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

import { defineComponent as V, computed as g, openBlock as a, createElementBlock as l, Fragment as k, renderList as C, createVNode as p, unref as c, createElementVNode as r, createCommentVNode as y } from "vue";
import { p as U, g as P } from "./revoke-iScTU0eW.js";
import { _ as b } from "./icon.vue_vue_type_script_setup_true_lang-BKjDMfHm.js";
const E = {
  key: 0,
  class: "epic-del-btn"
}, N = ["onClick"], D = /* @__PURE__ */ V({
  __name: "index",
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(u, { emit: d }) {
    const m = U.getComponent("number"), i = u, v = d, o = g({
      get() {
        return i.modelValue;
      },
      set(e) {
        v("update:modelValue", e);
      }
    });
    function _() {
      const e = {
        type: "col",
        children: [],
        componentProps: {
          span: 12
        },
        id: P()
      };
      o.value.push(e);
    }
    function f(e) {
      o.value = o.value.filter((h, n) => e !== n);
    }
    return (e, h) => (a(), l("div", null, [
      (a(!0), l(k, null, C(o.value, (n, s) => (a(), l("div", {
        key: s,
        class: "EColEditor-item"
      }, [
        p(c(m), {
          value: n.componentProps.span,
          "onUpdate:value": (t) => n.componentProps.span = t,
          modelValue: n.componentProps.span,
          "onUpdate:modelValue": (t) => n.componentProps.span = t,
          style: { width: "100%" },
          min: 1,
          max: 24
        }, null, 8, ["value", "onUpdate:value", "modelValue", "onUpdate:modelValue"]),
        o.value.length > 1 ? (a(), l("div", E, [
          r("span", {
            onClick: (t) => f(s)
          }, [
            p(c(b), { name: "icon-shanchu1" })
          ], 8, N)
        ])) : y("", !0)
      ]))), 128)),
      r("div", {
        class: "add-btn",
        onClick: _
      }, " 添加 ")
    ]));
  }
});
export {
  D as default
};