基于Vue2和jsmind.js实现思维导图
使用Vue2和jsmind.js实现思维导图,包括放大、缩小、添加、修改和删除等基本功能,以及使用jsmind.menu实现右键点击显示菜单。1 参考文档注意:vue-jsmind是在jsmind.js基础上进行了封装,本文用的是jsmind不是vue-jsmind;jsmind.menu.js不是jsmind.js自带的,是其他大神开发的。1.1 参考网址实现基本功能使用jsmind.js即可,
·
使用Vue2和jsmind.js实现思维导图,包括放大、缩小、添加、修改和删除等基本功能,以及使用jsmind.menu实现右键点击显示菜单。
1 参考文档
注意:vue-jsmind是在jsmind.js基础上进行了封装,本文用的是jsmind不是vue-jsmind;jsmind.menu.js不是jsmind.js自带的,是其他大神开发的。
1.1 参考网址
实现基本功能使用jsmind.js即可,不需要jsmind.menu.js
开源项目地址: http://hizzgdev.github.io/jsmind/developer.html
gitee上的地址:https://gitee.com/mirrors/jsmind
github上的地址:https://github.com/hizzgdev/jsmind
实现右键菜单的js文件,实现此功能需要将jsmind.menu.js文件下载下来,再动态导入到工程中。
https://github.com/allensunjian/jsmind.menu.js
1.2 安装jsmind
我使用的版本是:"jsmind": "^0.4.6";
cnpm install jsmind --save
2 截图
3 源代码
<template>
<div>
<div>
<input type="button" value="放大" v-on:click="zoomIn" />
<input type="button" value="缩小" v-on:click="zoomOut" />
</div>
<div id="jsmind_container"></div>
</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");
require("@/assets/js/jsmind.menu.js");
export default {
name: "MyJsmind",
data: function () {
return {
jm: null,
};
},
mounted: function () {
this.init_data();
},
methods: {
init_data: function () {
var mind = {
/* 元数据,定义思维导图的名称、作者、版本等信息 */
meta: {
name: "jsMind-demo-tree",
author: "hizzgdev@163.com",
version: "0.2",
},
/* 数据格式声明 */
format: "node_tree",
/* 数据内容 */
data: {
id: "root",
topic: "jsMind",
children: [
{
id: "easy",
topic: "Easy",
direction: "left",
expanded: false,
children: [
{ id: "easy1", topic: "Easy to show" },
{ id: "easy2", topic: "Easy to edit" },
{ id: "easy3", topic: "Easy to store" },
{ id: "easy4", topic: "Easy to embed" },
],
},
{
id: "open",
topic: "Open Source",
direction: "right",
expanded: true,
children: [
{ id: "open1", topic: "on GitHub" },
{ id: "open2", topic: "BSD License" },
],
},
{
id: "powerful",
topic: "Powerful",
direction: "right",
children: [
{ id: "powerful1", topic: "Base on Javascript" },
{ id: "powerful2", topic: "Base on HTML5" },
{ id: "powerful3", topic: "Depends on you" },
],
},
{
id: "other",
topic: "test node",
direction: "left",
children: [
{ id: "other1", topic: "I'm from local variable" },
{ id: "other2", topic: "I can do everything" },
],
},
],
},
};
var options = {
container: "jsmind_container",
editable: true,
theme: "primary",
menuOpts: {
showMenu: true,
injectionList: [
{
target: "edit",
text: "编辑节点",
callback: function (node) {
console.log(node);
},
},
{
target: "addChild",
text: "添加子节点",
callback: function (node) {
console.log(node);
},
},
{
target: "addBrother",
text: "添加兄弟节点",
callback: function (node) {
console.log(node);
},
},
{
target: "delete",
text: "删除节点",
callback: function (node) {
console.log(node);
},
},
{
target: "screenshot",
text: "下载导图",
callback: function (node) {
console.log(node);
},
},
{
target: "showAll",
text: "展开全部节点",
callback: function (node) {
console.log(node);
},
},
{
target: "hideAll",
text: "收起全部节点",
callback: function (node) {
console.log(node);
},
},
],
},
};
this.jm = new jsMind(options);
this.jm.show(mind);
},
zoomIn: function () {
this.jm.view.zoomIn();
},
zoomOut: function () {
this.jm.view.zoomOut();
},
},
};
</script>
<style scoped>
#jsmind_container {
width: 100%;
height: 800px;
}
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)