话不多说,直接上代码,搜罗了下对应的属性,方便后面进行会看
import { Badge, Descriptions, Table, Button, Popconfirm, message } from 'antd';
import { useEffect, useState } from 'react';
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind'
// window.jsmind=jsMind;
export default function MiaoshuList() {
const listStyle = {
color: 'red',
backgroundColor: 'black'
}
useEffect(() => {
writeMind()
}, [])
const [jms, setJm] = useState(null)//用来存储js获取不到的问题
let jm = null;
const writeMind = () => {
let mind = {
meta: {
name: "jsMind-demo-tree",
author: "hizzgdev@163.com",
version: "0.2",
},
/* 数据格式声明 */
format: "node_tree",
/* 数据内容 */
data: {
id: "root",
topic: "测试使用",//思维导图表名
children: [
{
id: "easyss",
topic: "Easyss",//下级的表名
direction: "right",
expanded: true,//默认是否展开
children: [
{ id: "easy1", topic: "Easy to show" },
{ id: "easy2", topic: "Easy to edit" },
{ id: "easy3", topic: "Easy to store" },
{ id: "easy4", topic: "Easy to embed" },
],
},
{
id: "open",
topic: "Open Source",
direction: "right",
expanded: true,
children: [
{ id: "open1", topic: "on GitHub" },
{ id: "open2", topic: "BSD License" },
],
},
{
id: "powerful",
topic: "Powerful",
direction: "right",
children: [
{ id: "powerful1", topic: "Base on Javascript" },
{ id: "powerful2", topic: "Base on HTML5" },
{ id: "powerful3", topic: "Depends on you" },
],
},
{
id: "other",
topic: "test node",
direction: "left",
children: [
{ id: "other1", topic: "I'm from local variable" },
{ id: "other2", topic: "I can do everything" },
],
},
],
},
}
let options = {
container: "jsmind_container",// [必选] 容器的ID,或者为容器的对
editable: true,//是否启用编辑
theme: "orange",//主题
view: {
line_width: 2, // 思维导图线条的粗细
line_color: "#ccc" // 思维导图线条的颜色
},
// mode: 'side',// 显示模式,子节点只分布在根节点右侧
menuOpts: {
showMenu: true,
},
};
jm = new jsMind(options);
jm.show(mind);
setJm(jm)
// this.jm.show(mind);
}
//放大
const zoomIn = () => {
console.log('fada', jms)
jms.view.zoomIn();//这里使用useState来存储jm信息,原生拿去不到
}
//缩小
const zoomOut = () => {
jms.view.zoomIn();//这里使用useState来存储jm信息,原生拿去不到
}
//展开到指定层级
const showNum = () => {
console.log('jms', jms)
jms.expand_to_depth(1)//展开到指定几级菜单
}
return (
<>
<div>
<div onClick={() => zoomIn()}>
放大
</div>
<div onClick={() => zoomOut()}>
缩小
</div>
<div onClick={() => showNum()}>展开到指定层级</div>
<div id='jsmind_container' style={{ width: '100%', height: '500px' }}>
</div>
</div>
</>
)
}
··