d-render/esm/cip-form/form-directory.js

数据渲染库 - form、table、search-form

import { defineComponent, ref, computed, createVNode, Fragment, h } from 'vue';
import { ElIcon, ElDrawer } from 'element-plus';
import { List } from '@element-plus/icons-vue';

var formDirectory = /* @__PURE__ */ defineComponent({
  props: {
    directory: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const drawerSwitch = ref(false);
    const openDrawer = () => {
      drawerSwitch.value = true;
    };
    const list = computed(() => {
      const result = [];
      Object.keys(props.directory).forEach((key) => {
        result.push({
          key,
          config: props.directory[key]
        });
      });
      return result;
    });
    const DynamicHead = ({
      config
    }) => {
      return h("a", {
        href: `#${config.key}`,
        class: "form-directory-item"
      }, [h("h" + config.config.level, {}, [config.config.label])]);
    };
    return () => createVNode(Fragment, null, [createVNode("div", {
      "class": "form-directory__switch",
      "onClick": () => openDrawer()
    }, [createVNode(ElIcon, {
      "style": "font-size: 24px"
    }, {
      default: () => [createVNode(List, null, null)]
    })]), createVNode(ElDrawer, {
      "custom-class": "form-directory__drawer",
      "modelValue": drawerSwitch.value,
      "onUpdate:modelValue": ($event) => drawerSwitch.value = $event,
      "title": "\u8868\u5355\u76EE\u5F55"
    }, {
      default: () => [createVNode("div", {
        "class": "form-directory"
      }, [list.value.map((v) => {
        return createVNode(DynamicHead, {
          "key": v.key,
          "config": v
        }, null);
      })])]
    })]);
  }
});

export { formDirectory as default };