vue中使用mxgraph 工具栏

要在Vue项目中使用mxGraph工具栏，您可以使用mxgraph中提供的`mxToolbar`类。首先，您需要安装mxgraph库：

npm install mxgraph --save

然后在需要使用mxGraph的组件中，使用以下代码引入mxGraph库：

import mxgraph from 'mxgraph';
const { mxGraph, mxRubberband, mxToolbar } = mxgraph();

接下来，在组件的`mounted`或`created`生命周期中，您可以创建mxGraph实例和mxToolbar实例：

const container = document.getElementById('graphContainer');
const graph = new mxGraph(container);
const toolbar = new mxToolbar(container);

在这个例子中，我们将mxToolbar添加到了mxGraph容器元素上。您也可以将它添加到其他元素上。

接下来，您可以使用`addMode`方法将工具添加到工具栏上：

const button = document.createElement('button');
button.innerHTML = 'Rectangle';
button.addEventListener('click', () => {
  const parent = graph.getDefaultParent();
  graph.getModel().beginUpdate();
  try {
    const vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 30);
  } finally {
    graph.getModel().endUpdate();
  }
});
toolbar.addMode(null, button, () => {
  graph.setCellStyles(mxConstants.STYLE_SHAPE, mxConstants.SHAPE_RECTANGLE);
});

在这个例子中，我们创建了一个名为“Rectangle”的工具按钮，当用户点击它时，它会在mxGraph中添加一个矩形。我们还使用`addMode`方法将工具按钮添加到工具栏中，并指定了一个回调函数，以便在用户选择该工具时修改mxGraph的样式。

当您完成使用mxGraph和mxToolbar时，不要忘记在组件的`beforeDestroy`生命周期中销毁它们：

graph.destroy();
toolbar.destroy();