vue3思维导图 -jsmind

在Vue 3中，要使用jsMind创建思维导图，首先需要安装jsMind：

npm install jsmind

然后在Vue组件中引入并使用jsMind：

<template>
  <div ref="jsmindContainer"></div>
</template>
 
<script>
import { JSMind } from 'jsmind';
 
export default {
  name: 'MindMap',
  mounted() {
    const mind = new JSMind(this.$refs.jsmindContainer, {
      // 初始化思维导图的数据
      data: {
        id: 'root',
        topic: '中心主题',
        children: [
          {
            id: 'sub1',
            topic: '子主题1',
          },
          {
            id: 'sub2',
            topic: '子主题2',
            children: [
              {
                id: 'sub2-1',
                topic: '子主题2-1',
              },
              {
                id: 'sub2-2',
                topic: '子主题2-2',
              },
            ],
          },
        ],
      },
      // 其他配置...
    });
  },
};
</script>
 
<style>
/* 样式可以根据需要自定义 */
</style>

在上述代码中，我们创建了一个名为MindMap的Vue组件，它在mounted生命周期钩子中初始化了jsMind，并将其挂载到模板中定义的<div>元素上。data属性用于定义思维导图的初始结构。在实际应用中，你可以将data属性值通过props传入组件，或者从外部API异步获取。