Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

如何在vue项目中使用jsmid


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

安装依赖包

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...