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 jsMindjm = new JsMind({container: jsmindContainer.value, //渲染的体editable: false, //是否可以编辑// theme: "red",//主题色enable_drag_and_drop: false, // 禁用节点的拖拽（包括折叠功能）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 dataconst 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 mapjm.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>

样式配置和配置项说明：

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

options = {container : '',         // [必选] 容器的IDeditable : 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>}},
};