mindnode_mindnode映射的Vue组件

姬高澹

2023-12-01

mindnode

Vue思维导图 (VueMindmap)

VueMindmap is a vue component for mindnode maps inspered by react-mindmap.

VueMindmap是由react-mindmap插入的mindnode映射的vue组件。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install --save vue-mindmap

用法 (Usage)

捆绑器(Webpack，汇总) (Bundler (Webpack, Rollup))

import Vue from 'vue'
import VueMindmap from 'vue-mindmap'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mindmap/dist/vue-mindmap.css'

Vue.use(VueMindmap)

<template>
  <mindmap
    :nodes="nodes"
    :connections="connections"
    :editable="true"
  />
</template>

<script>
  export default {
    name: 'MyMindmap',
    data() {
      return {
        nodes: [...],
        connections: [...]
      }
    }
  }
</script>

浏览器 (Browser)

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-mindmap/dist/vue-mindmap.css"></link>
<script src="vue-mindmap/dist/vue-mindmap.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css"></link>
<script src="https://unpkg.com/vue-mindmap"></script>

道具 (Props)

Prop	Type	Default	Description
nodes	Array	[ ]	Array of objects used to render nodes.
connections	Array	[ ]	Array of objects used to render connections.
subnodes	Array	[ ]	Array of objects used to render subnodes.
editable	Boolean	false	Enable editor mode, which allows to move around nodes.

Struts	类型	默认	描述
节点	数组	[]	用于渲染节点的对象数组。
连接数	数组	[]	用于呈现连接的对象数组。
子节点	数组	[]	用于渲染子节点的对象数组。
可编辑的	布尔型	假	启用编辑器模式，该模式允许在节点之间移动。

节点 (nodes)

Array of objects used to render nodes. Below an example of the node structure.

用于渲染节点的对象数组。下面是一个节点结构的例子。

{
  "text": "python",
  "url": "http://www.wikiwand.com/en/Python_(programming_language)",
  "fx": -13.916222252976013,
  "fy": -659.1641376795345,
  "category": "wiki",
  "note": ""
}

The possible attributes are:

可能的属性是：

text: title of the node
text ：节点的标题
url: url contained in the node
url ：节点中包含的URL
fx and fy: coordinates (if not present they'll be generated)
fx和fy ：坐标(如果不存在，将生成它们)
category: category used to generate an emoji
category ：用于生成表情符号的类别
note: note that will be visible on hover
注意：注意，将在悬停时可见

连接数 (connections)

Array of objects used to render connections. Below an example of the connection structure.

用于呈现连接的对象数组。下面是一个连接结构的例子。

{
  "source": "python",
  "target": "basics",
  "curve": {
    "x": -43.5535,
    "y": 299.545
  }
}

The possible attributes are:

可能的属性是：

source: title of the node where the connection starts
source ：连接开始的节点的标题
target: title of the node where the connection ends
target ：连接结束的节点的标题
curve.x and curve.y: coordinates of the control point of a quadratic bezier curve
curve.x和curve.y ：二次贝塞尔曲线的控制点的坐标

(if not specified the connection will be straight)
(如果未指定，则连接将是直的)

子节点 (subnodes)

Array of objects used to render subnodes. The structure is the same as for nodes with two additional attributes:

用于渲染子节点的对象数组。结构与具有两个附加属性的节点的结构相同：

parent: title of the parent node
parent ：父节点的标题
color: used for the margin color, needs to be a valid CSS color
color ：用于页边距颜色，必须是有效CSS颜色

造型 (Styling)

Here's a list of all CSS classes for styling:

这是所有样式CSS类的列表：

.mindmap-svg: main svg element containing the map;
.mindmap-svg ：包含地图的主要svg元素；
.mindmap-node: foreignObject element representing a node;
.mindmap-node ：表示节点的foreignObject元素；
.mindmap-node--editable: foreignObject element representing a node in editor mode;
.mindmap-node--editable ：表示处于编辑器模式下的节点的foreignObject元素；
.mindmap-subnode-group-text: foreignObject element containing all subnodes of a given node;
.mindmap-subnode-group-text ： foreignObject元素，包含给定节点的所有子节点；
.mindmap-subnode-text: div element containing a subnode;
.mindmap-subnode-text ：包含一个子节点的 div元素；
.mindmap-connection: path element for each connection;
.mindmap-connection ：每个连接的path元素；
.mindmap-emoji: img tag for emoji
.mindmap-emoji ： 表情符号的 img标签

发展历程 (Development)

启动视觉测试 (Launch visual tests)

npm run dev

发起因果报应 (Launch Karma with coverage)

npm run dev:coverage

建立 (Build)

Bundle the js and css of to the dist folder:

将的js和CSS捆绑到dist文件夹：

npm run build

翻译自: https://vuejsexamples.com/a-vue-component-for-mindnode-maps/