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

基于 Element Plus 二次封装的数据驱动渲染组件库 - 表单、搜索表单、表格配置化渲染

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

var formDirectory = /* @__PURE__ */ defineComponent({
  props: {
    directory: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const {
      t
    } = useLocale();
    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 renderHead = (item) => {
      return h("a", {
        key: item.key,
        href: `#${item.key}`,
        class: "form-directory-item"
      }, [h("h" + item.config.level, {}, [item.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": t("dr.form.directory")
    }, {
      default: () => [createVNode("div", {
        "class": "form-directory"
      }, [list.value.map((v) => {
        return renderHead(v);
      })])]
    })]);
  }
});

export { formDirectory as default };