jsmind를 사용하여 vue에서 마인드 맵 생성
전망: 프로젝트에 관련된 다단계 데이터 구조가 있으며 마인드 맵 방식이 데이터 관계를 보는 데 더 편리합니다.
기술 구현: jsmind
구현 효과:
설치하다
npm i jsmind
코드
<template>
<div id="jsmind_container"></div>
</template>
<script>
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind.js'
window.jsMind = jsMind
require('jsmind/js/jsmind.draggable.js')
require('jsmind/js/jsmind.screenshot.js')
export default {
data() {
return {
mind: {
/* 元数据,定义思维导图的名称、作者、版本等信息 */
meta: {
name: "思维导图",
author: "[email protected]",
version: "0.2"
},
/* 数据格式声明 */
format: "node_tree",
/* 数据内容 */
data: {
}
},
options: {
container: "jsmind_container", // [必选] 容器的ID
editable: false, // [可选] 是否启用编辑
theme: "primary", // [可选] 主题
view: {
engine: "canvas", // 思维导图各节点之间线条的绘制引擎
hmargin: 120, // 思维导图距容器外框的最小水平距离
vmargin: 50, // 思维导图距容器外框的最小垂直距离
line_width: 2, // 思维导图线条的粗细
line_color: "#999" // 思维导图线条的颜色
},
layout: {
hspace: 50, // 节点之间的水平间距
vspace: 20, // 节点之间的垂直间距
pspace: 20 // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)
},
shortcut: {
enable: false // 是否启用快捷键 默认为true
}
}
};
mounted() {
// 初始化
this.jm = jsMind.show(this.options, this.mind);
}
}
</script>
이것은 단순한 마인드맵 생성으로 추가, 삭제, 수정 및 확인 작업이 필요하지 않습니다
.더 많은 작업 기사 참조: vue에서 jsmind 조직 구조 또는 마인드맵 사용