Vue3 前端 生成 思维导图

首先安装markamap 包 

// 
npm install markmap-lib
 
//
npm install markmap-view
 
//
npm install markmap-common

import {Markmap} from "markmap-view";
import {Transformer} from 'markmap-lib';
let initValue = ''  //脑图数据
//脑图部分
const mapRef = ref()
const mapValue = ref<any>()
const transformer = new Transformer()
//生成 脑图的方法
const update = () => {
    const {root} = transformer.transform(initValue);
    mapValue.value.setData(root);
    mapValue.value.fit();
//如果说 默认不展示  某个时机下 才展示脑图 一开始就 先 销毁掉
    if(initValue == ''){
        mapValue.value.destroy();
    }
}
 
//下面这两行代码是 绘制脑图的 代码 看 需求 时机

 mapValue.value = Markmap.create(mapRef.value) //绘制脑图
                update()