在vue中使用jsmind组织架构或思维导图

以你之姓@ 2022-10-07 06:49 866阅读 0赞

在项目中遇到组织架构或思维导图的需求，选的技术是 [jsmind][]  
官方文档给的示例，有需要的可以参考：[示例][Link 1]  
先来看看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]

### 查看完整代码 ###

**如想查看完整代码**：请访问 [jsmind\_demo][jsmind_demo]

尝试了两种类型：第一张截图是**普通菜单**类型，第二张截图可以进行**右键菜单**操作。最终选用了普通菜单类型。  
`jsmind` 可以导入 `jm` 文件并渲染出来，也可以对编辑后的文件进行保存，也可以下载编辑好的思维导图，可以展开指定层级节点，修改主题，以及对节点进行增删改查等操作。  
演示：

![在这里插入图片描述][20210616182642520.gif]

接下来如何使用：

### 安装 ###

npm i jsmind
    // 或者
    yarn add jsmind

### 普通菜单代码 ###

<template>
      
      <div class="jsmind_layout">
        <div class="jsmind_toolbar" v-if="showBar">
          <el-upload class="pad" :multiple="false" ref="upload" action="action" :before-upload="beforeUpload" :http-request="upload">
            <el-button type="primary" size="medium">导入</el-button>
          </el-upload>
          <el-button @click="save_nodearray_file" size="medium">保存</el-button>
          <el-button @click="screen_shot" size="medium">下载导图</el-button>
          <el-button @click="get_nodearray_data" size="medium">获取数据</el-button>
          <el-button @click="addNode" size="medium">新增节点</el-button>
          <el-button @click="addBrotherNode" size="medium">新增兄弟节点</el-button>
          <el-button @click="editNode" size="medium">编辑节点</el-button>
          <el-button @click="removeNode" size="medium">删除节点</el-button>
          <el-button @click="zoomIn" size="medium" :disabled="isZoomIn">放大</el-button>
          <el-button @click="zoomOut" size="medium" :disabled="isZoomOut" class="pad">缩小</el-button>
          <span>展开：</span>
          <el-select v-model="level" placeholder="展开节点" @change="expand_to_level" class="pad pad-left" size="medium">
            <el-option v-for="item in nodeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <span>主题：</span>
          <el-select v-model="localTheme" placeholder="选择主题" @change="set_theme" size="medium">
            <el-option v-for="item in themeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div id="jsmind_container" ref="container">
        </div>
        <el-drawer title="编辑节点" :visible.sync="dialogVisible" size="500px">
          <el-form label-width="80px" class="form-con">
            <el-form-item label="字体大小">
              <el-input-number controls-position="right" v-model.number="nodeOption.fontSize" class="ele-width" :min="1" :max="30" maxLength="2"></el-input-number>
            </el-form-item>
            <el-form-item label="字体粗细">
              <el-select v-model="nodeOption.fontWeight" class="ele-width">
                <el-option value="normal" label="常规"></el-option>
                <el-option value="bold" label="粗体"></el-option>
                <el-option value="bolder" label="更粗"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体样式">
              <el-select v-model="nodeOption.fontStyle" class="ele-width">
                <el-option value="normal" label="标准"></el-option>
                <el-option value="italic" label="斜体"></el-option>
                <el-option value="oblique" label="倾斜"></el-option>
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="背景颜色">
                  <el-color-picker v-model="nodeOption.bgColor" show-alpha size="mini"></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="字体颜色">
                  <el-color-picker v-model="nodeOption.fontColor" show-alpha size="mini"></el-color-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="节点内容">
              <el-input type="textarea" :rows="2" v-model="nodeOption.content" class="ele-width" maxLength="64"></el-input>
            </el-form-item>
          </el-form>
          <template v-slot:footer>
            <div class="right mr-10">
              <el-button type="primary" class="common-btn" @click="sureEditNode" size="medium">确 定</el-button>
            </div>
          </template>
        </el-drawer>
      </div>
    </template>

### 右键菜单代码 ###

[jsmind]: https://github.com/hizzgdev/jsmind/blob/master/docs/zh/1.usage.md
[Link 1]: http://hizzgdev.github.io/jsmind/example/2_features.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221005/6b7f7f61047d4217acf4d51404b594f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]: /images/20221005/981ee7bbbf2448bea88fda80d569f8d2.png
[jsmind_demo]: https://gitee.com/dulily/test_code/tree/master/jsmind/jsmind_demo
[20210616182642520.gif]: /images/20221005/3d4080b4731d4d5ca019b843a29003b9.png