安装依赖包
yarn add jsmind
特别注意: 一定要给 jsmind_container
元素给固定的宽高,否则无法显示
代码如下:
<template>
<div id="jsmind_container"></div>
</template>
<script>
import "jsmind/style/jsmind.css";
import jsMind from "jsmind";
export default {
name: "App",
mounted() {
var mind = {
meta: {
name: "demo",
author: "[email protected]",
version: "0.2",
},
format: "node_array",
data: [
{ id: "root", isroot: true, topic: "jsMind" },
{
id: "sub1",
parentid: "root",
topic: "sub1",
"background-color": "#0000ff",
},
{ 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",
"foreground-color": "#33ff33",
},
{ id: "sub3", parentid: "root", topic: "sub3" },
],
};
var options = {
container: "jsmind_container",
editable: true,
theme: "primary",
};
var jm = jsMind.show(options, mind);
jm.add_node("sub2", "sub23", "new node", { "background-color": "red" });
jm.set_node_color("sub21", "green", "#ccc");
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…