使用<SuperFlow>报错

[Pipcao]

vue3.2.20使用SuperFlow报错

[rr13k]

参考示例代码，或使用如下代码测试，在vue最新版测试通过.
"vue": "^3.2.47",
"vite": "^4.3.9",

import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

var origin= [681, 465]

var graphMenuList=  [
          [
            {
              label: '开始节点',
              disable(graph) {
                return !!graph.nodeList.find(node => node.meta.prop === 'start')
              },
              selected: (graph, coordinate) => {
                const start = graph.nodeList.find(node => node.meta.prop === 'start')
                if (!start) {
                  graph.addNode({
                    width: 100,
                    height: 80,
                    coordinate: coordinate,
                    meta: {
                      prop: 'start',
                      name: '开始节点'
                    }
                  })
                }
              }
            },
            {
              label: '条件节点',
              disable: false,
              selected: (graph, coordinate) => {
                graph.addNode({
                  width: 160,
                  height: 80,
                  coordinate: coordinate,
                  meta: {
                    prop: 'condition',
                    name: '条件节点'
                  }
                })
              }
            },
            {
              label: '审批节点',
              disable: false,
              selected: (graph, coordinate) => {
                graph.addNode({
                  width: 160,
                  height: 80,
                  coordinate: coordinate,
                  meta: {
                    prop: 'approval',
                    name: '审批节点'
                  }
                })
              }
            },
            {
              label: '抄送节点',
              disable: false,
              selected: (graph, coordinate) => {
                graph.addNode({
                  width: 160,
                  height: 80,
                  coordinate: coordinate,
                  meta: {
                    prop: 'cc',
                    name: '抄送节点'
                  }
                })
              }
            },
            {
              label: '结束节点',
              disable(graph) {
                return !!graph.nodeList.find(point => point.meta.prop === 'end')
              },
              selected: (graph, coordinate) => {
                graph.addNode({
                  width: 80,
                  height: 50,
                  coordinate: coordinate,
                  meta: {
                    prop: 'end',
                    name: '结束节点'
                  }
                })
              }
            }
          ],
          [
            {
              label: '打印数据',
              selected: (graph, coordinate) => {
                console.log(JSON.stringify(graph.toJSON(), null, 2))
              }
            },
            {
              label: '全选',
              selected: (graph, coordinate) => {
                graph.selectAll()
              }
            }
          ]
        ]
    var nodeMenuList = [
          [
            {
              label: '删除',
              disable: false,
              hidden(node) {
                return node.meta.prop === 'start'
              },
              selected(node, coordinate) {
                node.remove()
              }
            }
          ],
          [
            {
              label: '编辑',
              selected: (node, coordinate) => {
                console.log(node, coordinate)
              }
            }
          ]
        ]
      var   linkMenuList = [
          [
            {
              label: '删除',
              disable: false,
              selected: (link, coordinate) => {
                link.remove()
              }
            }
          ],
          [
            {
              label: '编辑',
              disable: false,
              selected: (link, coordinate) => {
                console.log(link, coordinate)
              }
            }
          ]
        ]
      var nodeList = [
        {
          'id': 'nodeS3WgFnzCI15X58Qw',
          'width': 100,
          'height': 80,
          'coordinate': [-644, -148],
          'meta': {
            'prop': 'start',
            'name': '开始节点'
          }
        },
        {
          'id': 'nodefHsy9uJObPtdHZv1',
          'width': 160,
          'height': 80,
          'coordinate': [-200, -148],
          'meta': {
            'prop': 'approval',
            'name': '审批节点',
            'desc': '111111'
          }
        },
        {
          'id': 'nodeni9QOqT3mI7hsMau',
          'width': 160,
          'height': 80,
          'coordinate': [-442, -275],
          'meta': {
            'prop': 'condition',
            'name': '条件节点'
          }
        },
        {
          'id': 'nodeZBK0ZPpgMe1exezE',
          'width': 160,
          'height': 80,
          'coordinate': [-200, -275],
          'meta': {
            'prop': 'approval',
            'name': '审批节点'
          }
        },
        {
          'id': 'nodeqkK9zjcDz53xKRlK',
          'width': 160,
          'height': 80,
          'coordinate': [34, -209],
          'meta': {
            'prop': 'cc',
            'name': '抄送节点'
          }
        },
        {
          'id': 'nodeDhVU6w2KbEnJCjZs',
          'width': 80,
          'height': 50,
          'coordinate': [286, -133],
          'meta': {
            'prop': 'end',
            'name': '结束节点'
          }
        },
        {
          'id': 'nodesyxisLH1hJDdPsxx',
          'width': 160,
          'height': 80,
          'coordinate': [34, -75],
          'meta': {
            'prop': 'cc',
            'name': '抄送节点'
          }
        },
        {
          'id': 'node0aiA9VuhjkiAdZCs',
          'width': 160,
          'height': 80,
          'coordinate': [-200, -2],
          'meta': {
            'prop': 'approval',
            'name': '审批节点'
          }
        },
        {
          'id': 'nodeG3WeFnzCI15X58Qw',
          'width': 160,
          'height': 80,
          'coordinate': [-442, -2],
          'meta': {
            'prop': 'condition',
            'name': '条件节点'
          }
        },
        {
          'id': 'node7WXbwOR6kSFD53Hf',
          'width': 160,
          'height': 80,
          'coordinate': [-442, -148],
          'meta': {
            'prop': 'condition',
            'name': '条件节点'
          }
        }
      ]
      var linkList = [
        {
          'id': 'linkcs9ZhumWeTHrtUy8',
          'startId': 'nodeS3WgFnzCI15X58Qw',
          'endId': 'nodeni9QOqT3mI7hsMau',
          'startAt': [100, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'linkBDld5rDBw4C6kiva',
          'startId': 'nodefHsy9uJObPtdHZv1',
          'endId': 'nodeqkK9zjcDz53xKRlK',
          'startAt': [160, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'linkA0ZZxRlDI9AOonuq',
          'startId': 'node7WXbwOR6kSFD53Hf',
          'endId': 'nodefHsy9uJObPtdHZv1',
          'startAt': [160, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'linkhCKTpRAf89gcujGS',
          'startId': 'nodeni9QOqT3mI7hsMau',
          'endId': 'nodeZBK0ZPpgMe1exezE',
          'startAt': [160, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'link2o7VZ7DRaSFKtB0g',
          'startId': 'nodeqkK9zjcDz53xKRlK',
          'endId': 'nodeDhVU6w2KbEnJCjZs',
          'startAt': [160, 40],
          'endAt': [0, 25],
          'meta': null
        },
        {
          'id': 'linkII013ovDctUDuPLu',
          'startId': 'nodeS3WgFnzCI15X58Qw',
          'endId': 'nodeG3WeFnzCI15X58Qw',
          'startAt': [100, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'link6MOmsq1EqzlWcG1n',
          'startId': 'nodeZBK0ZPpgMe1exezE',
          'endId': 'nodeqkK9zjcDz53xKRlK',
          'startAt': [160, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'link52SczSXHmuyKDzRU',
          'startId': 'nodesyxisLH1hJDdPsxx',
          'endId': 'nodeDhVU6w2KbEnJCjZs',
          'startAt': [160, 40],
          'endAt': [0, 25],
          'meta': null
        },
        {
          'id': 'link2hBQDTuIG4ZFYyE0',
          'startId': 'node0aiA9VuhjkiAdZCs',
          'endId': 'nodesyxisLH1hJDdPsxx',
          'startAt': [160, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'linkrwdW87FmOma5rPVo',
          'startId': 'nodeG3WeFnzCI15X58Qw',
          'endId': 'node0aiA9VuhjkiAdZCs',
          'startAt': [160, 40],
          'endAt': [0, 40],
          'meta': null
        },
        {
          'id': 'linknL75dQV0AWZA85sq',
          'startId': 'nodeS3WgFnzCI15X58Qw',
          'endId': 'node7WXbwOR6kSFD53Hf',
          'startAt': [100, 40],
          'endAt': [0, 40],
          'meta': null
        }
      ]

</script>

<template>
  <h1>{{ msg }}</h1>

  <span>hi</span>
  <super-flow
      ref="superFlow"
      :node-list="nodeList"
      :link-list="linkList"
      :origin="origin"
      :graph-menu="graphMenuList"
      :node-menu="nodeMenuList"
      :link-menu="linkMenuList"
      style="height: 100vh;"

      >
      <template v-slot:node="{meta}">
        <div :class="`flow-node flow-node-${meta.prop}`">
          <header>
            {{meta.name}}
          </header>
          <section>
            {{meta.desc}}
          </section>
        </div>
      </template>
    </super-flow>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

如需帮助请提供完整示例项目

[Pipcao]

使用上述代码不再报错，但是不显示组件不显示，使用的是jeecg项目

[rr13k]

错误提示了，你没有注册组件，你应该在vue 的main.js中添加

import {SuperFlow} from 'vue3-super-flow'
import 'vue3-super-flow/dist/style.css'

createApp(App).use(SuperFlow).mount('#app')

[Pipcao]

注册了的
`import { App, defineAsyncComponent } from 'vue';
import { Icon } from './Icon';
import AIcon from '/@/components/jeecg/AIcon.vue';
import { Button, JUploadButton } from './Button';
import {
Button as AntButton,
Select,
Alert,
Checkbox,
DatePicker,
Radio,
Switch,
Card,
List,
Tabs,
Descriptions,
Tree,
Table,
Divider,
Modal,
Drawer,
TreeSelect,
Dropdown,
Tag,
Tooltip,
Badge,
Popover,
Upload,
Transfer,
Steps,
PageHeader,
Result,
Empty,
Avatar,
Menu,
Breadcrumb,
Form,
Input,
Row,
Col,
Spin,
Space,
Layout,
Collapse,
Slider,
InputNumber,
Carousel,
Popconfirm,
Skeleton,
Cascader,
Rate,
} from 'ant-design-vue';
import {SuperFlow} from 'vue3-super-flow';
// @ts-ignore
import 'vue3-super-flow/dist/style.css';
// import 'vue3-super-flow/lib/index.css';

const compList = [AntButton.Group, Icon, AIcon, JUploadButton];

export function registerGlobComp(app: App) {
compList.forEach((comp) => {
app.component(comp.name || comp.displayName, comp);
});

app
.use(SuperFlow)
.use(Select)
.use(Alert)
.use(Button)
.use(Breadcrumb)
.use(Checkbox)
.use(DatePicker)
.use(Radio)
.use(Switch)
.use(Card)
.use(List)
.use(Descriptions)
.use(Tree)
.use(TreeSelect)
.use(Table)
.use(Divider)
.use(Modal)
.use(Drawer)
.use(Dropdown)
.use(Tag)
.use(Tooltip)
.use(Badge)
.use(Popover)
.use(Upload)
.use(Transfer)
.use(Steps)
.use(PageHeader)
.use(Result)
.use(Empty)
.use(Avatar)
.use(Menu)
.use(Tabs)
.use(Form)
.use(Input)
.use(Row)
.use(Col)
.use(Spin)
.use(Space)
.use(Layout)
.use(Collapse)
.use(Slider)
.use(InputNumber)
.use(Carousel)
.use(Popconfirm)
.use(Skeleton)
.use(Cascader)
.use(Rate);
}`

[rr13k]

需要提供完整git示例，否则无法协助测试

[Pipcao]

https://github.com/jeecgboot/jeecgboot-vue3

[Pipcao]

大佬有解决方案吗https://github.com/jeecgboot/jeecgboot-vue3