vue中使用思维导图(jsmind)

孤舟蓑影

已于 2024-03-19 12:32:14 修改

阅读量1.7k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript 学习

于 2024-03-19 12:30:06 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43313093/article/details/136838445

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue2.x和Vue3的后台管理系统项目中安装并使用jsMind库来创建一个可编辑的思维导图，包括数据结构和组件的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思维导图在开发中也是比较常见的需求了,尤其是后台管理系统之类的项目中,如果你还不会用,那么这篇文章可能对你有帮助

安装jsmind

npm install jsmind --save

vue2.x

<script>
import jsMind from 'jsmind'
import 'jsmind/draggable-node'
import 'jsmind/style/jsmind.css'

export default {
    data() {
        return {
            jsmind_options : {
                editable: true,
                theme: 'primary',
            },
            jsmind_data : {
                meta: {
			        name: 'demo',
			        author: 'test@example.com',
			        version: '0.2',
			    },
			    format: 'node_array',
			    data: [
			        { id: 'root', isroot: true, topic: 'jsMind' },
			        { id: 'sub1', parentid: 'root', topic: 'sub1' },
			        { id: 'sub11', parentid: 'sub1', topic: 'sub11' },
			        { id: 'sub12', parentid: 'sub1', topic: 'sub12' },
			        { id: 'sub13', parentid: 'sub1', topic: 'sub13' },
			
			        { id: 'sub2', parentid: 'root', topic: 'sub2' },
			        { id: 'sub21', parentid: 'sub2', topic: 'sub21' },
			        { id: 'sub22', parentid: 'sub2', topic: 'sub22' },
			
			        { id: 'sub3', parentid: 'root', topic: 'sub3' },
			    ],
            }
        }
    },
    mounted() {
        let options = Object.assign(this.jsmind_options, {
            container: this.$refs.jsmind_container
        });
        let jm = new jsMind(options);
        jm.show(this.jsmind_data);
    }
}
</script>

<style scoped>
    .jsmind-container {
        width: 1024px;
        height: 700px;
        border: solid 1px #ccc;
    }
</style>

<template>
    <div ref="jsmind_container" class="jsmind-container"></div>
</template>

vue3

<template>
  <div>
    <div ref="jsmindContainer" class="jsmind-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import JSMind from 'jsmind';
import "jsmind/draggable-node";
import "jsmind/style/jsmind.css";
const jsmindContainer = ref(null);//获取jsmindContainer的ref
let jsmind_options = ref({
  editable: true,
  theme: "primary",
});
let jsmind_data = ref({
  	meta: {
        name: 'demo',
        author: 'test@example.com',
        version: '0.2',
    },
    format: 'node_array',
    data: [
        { id: 'root', isroot: true, topic: 'jsMind' },
        { id: 'sub1', parentid: 'root', topic: 'sub1' },
        { id: 'sub11', parentid: 'sub1', topic: 'sub11' },
        { id: 'sub12', parentid: 'sub1', topic: 'sub12' },
        { id: 'sub13', parentid: 'sub1', topic: 'sub13' },

        { id: 'sub2', parentid: 'root', topic: 'sub2' },
        { id: 'sub21', parentid: 'sub2', topic: 'sub21' },
        { id: 'sub22', parentid: 'sub2', topic: 'sub22' },

        { id: 'sub3', parentid: 'root', topic: 'sub3' },
    ],
});
onMounted(() => {
  createMind();
});

const createMind = () => {
	let options = Object.assign(jsmind_options.value, {
	  container: jsmindContainer ,
	});
	let jm = new jsMind(options);
	jm.show(jsmind_data.value);
}
</script>

<style>
.jsmind-container {
  /* 给脑图容器添加一些样式 */
  border: 1px solid #ccc;
}
</style>

怎么样,是不是很简单