咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 277|回复: 0

[JavaScript] Vue-cli3生成的Vue项目加载Mxgraph方法示例

[复制链接]
  • TA的每日心情
    无聊
    2019-6-2 14:11
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-7-6 18:39:50 | 显示全部楼层 |阅读模式
    使用Vue-cli3生成Vue项目,并等待项目创建成功。

    vue create [项目名]安装mxgraph。

    cnpm install mxgraph --save安装exports-loader。

    cnpm install exports-loader --save安装script-loader。

    cnpm install script-loader --save
    在项目根目录新建vue.config.js文件。
    将以下内容复制到vue.config.js文件中。

    const path = require('path');

    function resolve(dir) {
      return path.join(__dirname, dir);
    }

    module.exports = {
      publicPath: './',
      outputDir: 'dist',
      lintOnSave: true,
      chainWebpack: (config) => {
        config.module
          .rule('')
          .test(/mxClient\.js$/)
          .use('exports-loader')
          .loader('exports-loader?mxClient,mxGraphModel,mxActor,mxShape,mxEventObject,mxGraph,mxPrintPreview,mxEventSource,mxRectangle,mxVertexHandler,mxMouseEvent,mxGraphView,mxImage,mxGeometry,mxRubberband,mxKeyHandler,mxDragSource,mxGraphModel,mxEvent,mxUtils,mxWindow,mxEvent,mxCodec,mxCell,mxConstants,mxPoint,mxGraphHandler,mxCylinder,mxCellRenderer,mxEvent,mxUndoManager')
          .end();
        config.resolve.alias
          .set('@', resolve('src'))
          .set('@assets', resolve('src/assets'));
        // 按这种格式.set('', resolve('')) 自己添加
      }
    };修改HelloWorld.vue,替换为以下内容。

    <template>
      <div ref="graph_container"></div>
    </template>

    <script>
    import {
      mxGraph
    } from 'mxgraph/javascript/mxClient';

    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      mounted() {
        // Creates the graph inside the given container
        var graph = new mxGraph(this.$refs.graph_container);

        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        var parent = graph.getDefaultParent();

        // Adds cells to the model in a single step
        graph.getModel().beginUpdate();
        try {
          let v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
          let v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);

          graph.insertEdge(parent, null, '', v1, v2);
        } finally {
          // Updates the display
          graph.getModel().endUpdate();
        }
      }
    };
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      display: inline-block;
      margin: 0 10px;
    }

    a {
      color: #42b983;
    }
    </style>运行项目,查看效果。此Demo的源码可以查看

    到此这篇关于Vue-cli3生成的Vue项目加载Mxgraph方法示例的文章就介绍到这了,更多相关Vue项目加载Mxgraph内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持咔叽论坛!

    原文地址:https://www.jb51.net/article/187682.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 06:59

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表