如何在vue项目中使用jsmid

Question

https://github.com/hizzgdev/j...

Answer 1

安装依赖包

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: "hizzgdev@163.com",
        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>