vue2使用jsMind

vue2项目使用jsMind制作思维导图，点击每项按钮，出现多次渲染，请问再哪里能把之前的实力能销毁，因为每次渲染的数据是每次从后台返回的。

img

第一次加载挺好的，当点击第二次或者第三次按钮的时候就会出现2,3,4,5++递增的情况，请问怎么才能渲染单次点击的数据？

  • 这篇博客: vue使用jsMind（思维导图）中的 每个节点对应不同的菜单 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 目前插件是统一每一个是一样的menu。

    修改方式：

    • 每一个节点可定义一个dataClass 属性，不写是未定义不显示任何菜单，名字自定义取
    • 对应的menu中的injectionList数组增加dataClass属性
    • jsmind.menu.js中_event_contextMenu方法修改每一个menu-item的样式是否显示，同时_create_menu_item方法增加menuItem的class。
  • 以下回答由chatgpt基于相关博客总结生成:

    问题的关键在于如何在vue2项目中使用jsMind实现思维导图，并在点击每个按钮后渲染单次点击的数据。解决这个问题的关键在于如何销毁之前的实例和在每次渲染时只渲染单次点击的数据。

    首先，在vue2项目中使用jsMind实现思维导图，可以按照以下步骤进行操作：

    1. 在项目中安装jsMind：可以使用npm或者直接下载jsMind的文件并引入到项目中。

    2. 在需要使用思维导图的组件中引入jsMind的库文件：

    javascript import jsMind from 'jsmind'

    1. 创建一个jsMind实例，并指定放置思维导图的容器：

    javascript const mind = new jsMind({ container: 'mind-container', // 指定放置思维导图的容器的id或者class editable: true, // 是否可编辑 theme: 'default' // 主题（可选） })

    1. 定义思维导图的数据：

    javascript const mindData = { 'meta': { 'name': 'My Mindmap', 'author': 'John Doe', 'version': '1.0' }, 'format': 'node_array', 'data': [ {'id': 'root', 'isroot': true, 'topic': 'Main Topic', 'expanded': true, 'children': [ {'id': 'subtopic1', 'topic': 'Subtopic 1'}, {'id': 'subtopic2', 'topic': 'Subtopic 2'} ]} ] }

    1. 渲染思维导图：

    javascript mind.show(mindData)

    注意：渲染之前需要先销毁之前的实例，以避免多次渲染。

    1. 在需要的时候可以修改思维导图的数据或者样式，并重新渲染：

    ```javascript const newMindData = { 'meta': { 'name': 'My Mindmap', 'author': 'John Doe', 'version': '1.1' }, 'format': 'node_array', 'data': [ {'id': 'root', 'isroot': true, 'topic': 'Main Topic', 'expanded': true, 'children': [ {'id': 'subtopic1', 'topic': 'Subtopic 1'}, {'id': 'subtopic2', 'topic': 'Subtopic 2'}, {'id': 'subtopic3', 'topic': 'Subtopic 3'} ]} ] }

    mind.show(newMindData) ```

    接下来，针对销毁之前的实例和只渲染单次点击的数据的需求，可以按照以下步骤进行修改：

    1. 创建一个变量来存储jsMind实例：

    javascript let mindInstance = null

    1. 在点击按钮的事件处理函数中，首先判断是否已经存在mindInstance实例，如果存在则销毁之前的实例：

    javascript if (mindInstance) { mindInstance.destroy() // 销毁之前的实例 }

    1. 然后重新创建一个jsMind实例，并将其赋值给mindInstance变量：

    javascript mindInstance = new jsMind({ container: 'mind-container', // 指定放置思维导图的容器的id或者class editable: true, // 是否可编辑 theme: 'default' // 主题（可选） })

    1. 在点击按钮的事件处理函数中，根据后台返回的数据来构造思维导图的数据，并渲染到mindInstance实例上：

    javascript const responseData = // 后台返回的数据 const mindData = // 构造思维导图的数据 mindInstance.show(mindData)

    这样，每次点击按钮时就会销毁之前的实例并只渲染单次点击的数据。

    总结起来，解决问题的关键在于使用jsMind创建思维导图的实例，并在每次点击按钮后销毁之前的实例。通过以上步骤，可以在vue2项目中使用jsMind实现思维导图，并在点击每个按钮后渲染单次点击的数据。