formMenu(组件列表)

• Props(属性)

• Slots(卡槽)

• Events(事件)

• Init(初始化)

    mounted() {
      this.$refs.formMenu.init(this.$refs.formMain);
    }

formMain(主体)

• Props(属性)

• Events(事件)

Demo

<template>
  <div id="app">
    <div
      style="
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        overflow: auto;
      "
    >
      <div style="width: 200px; flex-shrink: 0; background: #f5f5f5">
        <form-menu :custom="list" ref="formMenu">
          <template v-slot:group-action="{}">
            <div>1</div>
          </template>
          <template v-slot:item-action="{}">
            <div>2</div>
          </template>
        </form-menu>
      </div>
      <div style="flex-grow: 1">
        <form-main
          ref="formMain"
          @save="saveComponent"
          v-model="container"
        ></form-main>
      </div>
    </div>
    <div style="flex-shrink: 0">
      <button class="btn" @click="save">保存</button>
    </div>
  </div>
</template>

<script>
import {formMenu,formMain} from "jeeyor-form-generator";

export default {
  components: { formMain, formMenu },
  data() {
    return {
      container: [],
      list: [
        {
          name: "自定义控件组",
          children: [
            {
              valueKey: "key_1622512977690",
              icon: "mdi-clock",
              type: "text",
              label: "11",
              labelShow: true,
              labelWidth: 60,
              width: 300,
              height: 60,
              widthMin: 300,
              heightMin: 60,
              dense: false,
              labelLeft: true,
              trigger: "blur",
              validate: [],
              x: 350,
              y: 170,
              r: 157,
              index: 1,
              key: "key_1622512977690",
              offsetX: "0.434",
              offsetR: "0.195",
              offsetY: "0.181",
            },
            {
              type: "group",
              label: "控件组",
              valueKey: "key_1622512982170",
              value: [
                {
                  valueKey: "key_1622512977690",
                  icon: "mdi-clock",
                  type: "text",
                  label: "单行输入框",
                  labelShow: true,
                  labelWidth: 60,
                  width: 300,
                  height: 60,
                  widthMin: 300,
                  heightMin: 60,
                  dense: false,
                  labelLeft: true,
                  trigger: "blur",
                  validate: [],
                  x: 350,
                  y: 170,
                  r: 157,
                  index: 1,
                  key: "key_1622512977690",
                  offsetX: "0.434",
                  offsetR: "0.195",
                  offsetY: "0.181",
                },
                {
                  valueKey: "key_1622512978730",
                  icon: "mdi-clock",
                  type: "textarea",
                  label: "多行输入框",
                  labelShow: true,
                  labelWidth: 60,
                  width: 300,
                  height: 60,
                  widthMin: 300,
                  heightMin: 60,
                  dense: false,
                  labelLeft: true,
                  trigger: "blur",
                  validate: [],
                  x: 320,
                  y: 280,
                  r: 187,
                  index: 2,
                  key: "key_1622512978730",
                  offsetX: "0.397",
                  offsetR: "0.232",
                  offsetY: "0.299",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.$refs.formMenu.init(this.$refs.formMain);
  },
  methods: {
    save(i) {
      console.log(this.container);
    },
    saveComponent(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss">
*,
:after,
:before {
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  word-break: break-all;
  -webkit-print-color-adjust: exact;
}
#app {
  height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  overflow: auto;
}
.btn {
  background: #00bea9;
  color: #fff;
  border: 0;
  padding: 5px 15px;
  border-radius: 4px;
}
</style>