vue3 使用JsMind的方法，JsMind节点点击事件，以及引入提示报错，无法找到模块“jsmind”的声明文件

最终结果：

一、使用：使用yarn或者npm 安装

 yarn add jsmind

npm install vue-jsmind

二、引入

两种方法：（如果这样引入没问题按照这样引入）

import "jsmind/style/jsmind.css";
import JsMind from "jsmind/js-legacy/jsmind.js";

另一种引入：

import "jsmind/style/jsmind.css";
import JsMind from "jsmind";

可能遇到的问题：无法找到模块“jsmind”的声明文件

解决办法（在src同级目录下，找到vite-env.d.ts文件，如果这样改了，上面文件引入方式必须按照第二种方法引入，目前本人使用0.8.5版本）：

测试案例：

<template>
  <div style="width: 100%; height: 200px" ref="jsmindContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import "jsmind/style/jsmind.css";
import JsMind from "jsmind";

const jsmindContainer = ref<HTMLDivElement | null>(null);
let jm: any = null;

onMounted(() => {
  if (jsmindContainer.value) {
    console.log("jsmindContainer:", jsmindContainer.value); // Check jsmindContainer value

    // Initialize jsMind
    jm = new JsMind({
      container: jsmindContainer.value, //渲染的体
      editable: false, //是否可以编辑
      // theme: "red",//主题色
      enable_drag_and_drop: false, // 禁用节点的拖拽（包括折叠功能）
 // support_html : true,    // 是否支持节点里的HTML元素，如数据中topic 的html属性
      view: {
         draggable: false,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
        line_style: "curved", /// 思维导图线条的样式，直线(straight)或者曲线(curved)
      },
      layout: {
        pspace: 0, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
      },
      // default_event_handle: {
      //   select_node: (node: any) => {
      //     console.log("Selected node:", node);
      //   },
      // },
    });

    // Define the mind map data
    const mind = {
      meta: {
        name: "Example",
      },
      format: "node_array",
      data: [
        { id: "root", isroot: true, topic: "Main Topic" },
        { id: "sub1", parentid: "root", topic: "Subtopic 1" },
        { id: "sub2", parentid: "root", topic: "Subtopic 2" },
        { id: "sub3", parentid: "sub1", topic: "sob 2" },
        { id: "sub4", parentid: "sub1", topic: "sob 3" },
      ],
    };

    console.log("Mind map data:", mind); // Check mind map data before showing

    // Show the mind map
    jm.show(mind);
 // 通过原生 DOM 事件捕捉节点点击事件
      jsmindContainer.value.addEventListener("click", handleClick);
  } else {
    console.error("jsmindContainer is null"); // Log an error if jsmindContainer is null
  }
});
const handleClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  const nodeId = target.getAttribute("nodeid");
  if (nodeId) {
    const node = jm.get_node(nodeId);
    handleNodeClick(node);
  }
};

// 节点点击事件处理函数
function handleNodeClick(node: any) {
   console.log(node);
  // 在这里处理节点点击事件，例如显示节点信息、跳转等
}
</script>

<style lang="less">
/* Optional styles */
/* 隐藏所有节点的折叠图标 */
jmexpander {
  display: none !important;
}
jmnode {
  border: 1px solid #666;
}
</style>

给某个节点设置背景色或者样式（只需要在数据里设置如： "background-color": "red"）：

样式配置和配置项说明：

链接：官网

var options = {
    container:'jsmind_container', // [必选] 容器的ID
    editable:true,                // [可选] 是否启用编辑
    theme:'orange'                // [可选] 主题
};
var jm = new jsMind(options);

options = {
   container : '',         // [必选] 容器的ID
   editable : false,       // 是否启用编辑
   theme : null,           // 主题
   mode :'full',           // 布局模式
   support_html : true,    // 是否支持节点里的HTML元素
   log_level: 'info',      // 日志级别
   view:{
       engine: 'canvas',   // 思维导图各节点之间线条的绘制引擎
       hmargin:100,        // 思维导图距容器外框的最小水平距离
       vmargin:50,         // 思维导图距容器外框的最小垂直距离
       line_width:2,       // 思维导图线条的粗细
       line_color:'#555',  // 思维导图线条的颜色
       line_style:'curved',// 思维导图线条的样式，直线(straight)或者曲线(curved)
       custom_line_render: null,  // 自定义的线条渲染方法
       draggable: false,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
       hide_scrollbars_when_draggable: false, // 当设置 draggable = true 时，是否隐藏滚动条
       node_overflow: 'hidden', // 节点文本过长时的样式
       zoom: {             // 配置缩放
           min: 0.5,       // 最小的缩放比例
           max: 2.1,       // 最大的缩放比例
           step: 0.1,      // 缩放比例间隔
       },
       custom_node_render: null, // 自定义的节点渲染方法
   },
   layout:{
       hspace:30,          // 节点之间的水平间距
       vspace:20,          // 节点之间的垂直间距
       pspace:13,          // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
       cousin_space:0      // 相邻节点的子节点之间的额外的垂直间距
   },
   shortcut:{
       enable:true,        // 是否启用快捷键
       handles:{},         // 命名的快捷键事件处理器
       mapping:{           // 快捷键映射
           addchild   : [45, 4096+13], 	// <Insert>, <Ctrl> + <Enter>
           addbrother : 13,    // <Enter>
           editnode   : 113,   // <F2>
           delnode    : 46,    // <Delete>
           toggle     : 32,    // <Space>
           left       : 37,    // <Left>
           up         : 38,    // <Up>
           right      : 39,    // <Right>
           down       : 40,    // <Down>
       }
   },
};