# c-mindmap

**Repository Path**: aburron/c-mindmap

## Basic Information

- **Project Name**: c-mindmap
- **Description**: vue 思维导图组件，改编自@wuxin/mindmap，对其进行了相关扩展
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-08-16
- **Last Updated**: 2023-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# c-mindmap 思维导图

![c-mindmap](https://note.youdao.com/yws/api/personal/file/WEB2534c21e7625d3a655dd2dd0c6bda9f7?method=download&shareKey=253ce0bd2938c2edbb83858a81127ceb)

> 一个由[MindNode](https://mindnode.com)启发的思维导图Vue组件，基于d3.js实现  
> 目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠...

## INSTALL

```bash
npm install c-mindmap
```

## PROPS

| Name        | Type   | Default   | Description          |
| ---         | ---    | ---       | ---                  |
| v-model     | Array  | undefined | 设置思维导图数据,格式见 DATA        |
| width       | Number | 100%      | 设置组件宽度           |
| height      | Number | undefined | 设置组件高度           |
| xSpacing    | Number | 80        | 设置节点横向间隔        |
| ySpacing    | Number | 20        | 设置节点纵向间隔        |
| strokeWidth | Number | 4         | 设置连线的宽度          |
| draggable   | Boolean| true      | 设置节点是否可拖拽      |
| gps         | Boolean| true      | 是否显示居中按钮        |
| fitView     | Boolean| true      | 是否显示缩放按钮        |
| showNodeAdd | Boolean| true      | 是否显示添加节点按钮     |
| keyboard    | Boolean| true      | 是否响应键盘事件        |
| contextMenu | Boolean| true      | 是否响应右键菜单        |
| zoomable    | Boolean| true      | 是否可缩放、拖移        |
| download    | Boolean| true      | 是否显示下载按钮        |

## DATA

```
[{
  name: '资产目录',
  children: [
    { 
      "name":"进阶",
      // left - 将节点放到左侧，进行写在第一级的children中
      "left": true
    },
    {
      "name":"节点一",
      "children": [
        { "name":"子节点1" },
        { "name":"子节点2" },
        { "name":"子节点3" }
      ]
    },
    {
      "name":"节点二",
      // _children - 表示该节点需默认折叠
      "_children": [ 
        { "name":"子节点1" },
        { "name":"子节点2" },
        { "name":"子节点3" }
      ]
    }
  ]
}]
```

## EVENTS

| Name           | arguments | Description                    |
| ---            | ---       | ---                            |
| updateNode     | data, id  | 更新节点名称时，传入节点数据和节点id |
| click          | data, id, parent | 点击节点时，传入节点数据、节点id与父节点数据   |
| deleteNode     | node      | 删除节点时，删除的节点数据         |
| addNode        | node      | 点击新增节点时，当前新增节点的父类节点数据 |
| moveNode       | newParent, currentNode  | 移动节点时，移动到新的父级节点的数据和当前移动节点的数据 |
| change         | data      | 导图有变动时，返回最新的导图数据    |

## METHODS

| Name           | arguments | Description                    |
| ---            | ---       | ---                            |
| delNode        | ---       | 删除树节点（原始树，非数据节点）    |


## USEAGE
```
<template>
  <div class="cMind" ref="cMind">
    <mindmap 
    v-model="data" 
    :height="mindHeight" 
    :strokeWidth="2"
    :download="false"
    @updateNodeName="updateNodeName"></mindmap>
  </div>
</template>
<script>
import mindmap from 'c-mindmap'
export default {
  name: 'cMind',
  components: {
    mindmap
  },
  data() {
    return {
      mindHeight: 500,
      data: [{
        name: '资产目录',
        children: []
      }],
      // 需要折叠的name
      hideNames:['前端组件']
    };
  },
  mounted() {
    const cMindH = this.$refs.cMind.offsetHeight;
    this.mindHeight = cMindH
  },
  methods: {
    setHideName(data) {
      if(Array.isArray(data) && data.length) {
        data.map(item => {
          if(this.hideNames.includes(item.name)) {
            // 设置成_children 该项会进行折叠
            const _children = [...item.children]
            Reflect.set(item, '_children', _children)
            Reflect.deleteProperty(item, 'children')
          } else if (item.children.length) {
              this.setHideName(item.children)
            }
        })
        return data
      } else {
        return []
      }
    },
    updateNodeName(data, id) {
      console.log(data, id);
    }
  }
};
</script>

```

> 出处：https://github.com/hellowuxin/mindmap 并对其进行了部分扩展