Vue中实现在线画流程图实现

概述

最近在调研一些在线文档的实现,包括文档编辑器、在线思维导图、在线流程图等,前面的文章基于语雀编辑器的在线文档编辑与查看实现了文档编辑器。在本文,分享在Vue框架下基于metaeditor-mxgraph实现在线流程图。

实现效果

image.png

实现

1. 添加依赖

{"metaeditor-mxgraph": "^2.0.7"
}

2. 编辑器简介

metaeditor-mxgraph,图元编辑器,支持独立的流程图编辑器,以及 DrawIO 嵌入方案。文档地址为:https://npm.io/package/metaeditor-mxgraph。

3. 编辑器实现

<template><div class="flow-chart" ref="flowChart"></div>
</template><script>
import 'metaeditor-mxgraph/assets/index.scss'
import { MetaEditor } from 'metaeditor-mxgraph'
const { MetaGraphEditor, getLanguage, stringToXml, xmlToString } = MetaEditorexport default {props: {chartData: {type: Object,default: () => null,},},mounted() {this.$nextTick(() => {this.init()})},watch: {chartData() {this.init()},},unmounted() {this.destroy()},methods: {destroy() {if (window.metaGraphEditor) window.metaGraphEditor.destroy()window.metaGraphEditor = null},init() {this.destroy()const xml = stringToXml(this.chartData || '<mxGraphModel></mxGraphModel>')const dom = this.$refs.flowChartconst metaGraphEditor = new MetaGraphEditor({container: dom,})const lan = getLanguage('zh')metaGraphEditor.init(lan, xml)window.metaGraphEditor = metaGraphEditor},},
}
</script><style scoped lang="scss">
.flow-chart {width: 100%;height: 100%;
}
</style>

需要注意的是,编辑器默认是绝对定位的,想要跟随设定dom大小,需要设置其样式为:

 .metagraph-container {position: relative;width: 100%;height: 100%;user-select: none;
}

设置完样式后,菜单的位置会出错,这个还没修复,使用时请注意。

4. 文档预览

<template><div class="flow-chart" ref="flowChart"></div>
</template><script>
import 'metaeditor-mxgraph/assets/index.scss'
import { MetaEditor } from 'metaeditor-mxgraph'
const { MetaGraphViewer, stringToXml} = MetaEditorexport default {props: {chartData: {type: Object,default: () => null,},},mounted() {this.$nextTick(() => {this.init()})},watch: {chartData() {this.init()},},methods: {init() {const xml = stringToXml(this.chartData || '<mxGraphModel></mxGraphModel>')const dom = this.$refs.flowChartconst metaGraphEditor = new MetaGraphViewer({xml: xml,})const { offsetWidth, offsetHeight } = domconst svg = metaGraphEditor.renderSVGDom(null, 1, 1, {width: offsetWidth,height: offsetHeight,})dom.appendChild(svg)},},
}
</script><style scoped lang="scss">
.flow-chart {width: 100%;height: 100%;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/870459.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LabVIEW开发CAN总线多传感器液位检测系统

设计并实现了一个基于CAN总线和LabVIEW的多传感器液位检测系统。该系统利用STM32F107单片机进行模拟信号与数字信号的转换&#xff0c;通过TJA1050实现CAN总线通信&#xff0c;并使用USB-CAN分析仪连接PC。LabVIEW用于数据采集、人机交互界面的设计、数据分析和仪器标定。系统能…

Paimon下载使用和基础操作说明

简介 Apache Paimon 是一种湖格式&#xff0c;支持使用 Flink 和 Spark 构建实时湖仓一体架构 用于流式处理和批处理操作。Paimon创新性地将湖格式与LSM&#xff08;Log-structured merge-tree&#xff09;相结合 结构&#xff0c;将实时流式更新引入 Lake 架构。 Paimon提供以…

05_TypeScript 中的数据类型

TypeScript 中的数据类型 一、概述二、详解布尔类型&#xff08;boolean&#xff09; true / false数字类型&#xff08;number&#xff09;字符串类型&#xff08;string&#xff09;数组类型&#xff08;array&#xff09;元组类型&#xff08;tuple&#xff09; 属于数组的一…

linux高级编程(网络)

数据的封包和拆包 封包&#xff1a; 应用层数据&#xff08;例如HTTP请求&#xff09;被传递给传输层。传输层&#xff08;TCP&#xff09;在数据前添加TCP头部&#xff08;包含端口号、序列号等&#xff09;。网络层&#xff08;IP&#xff09;在TCP段前添加IP头部&#xff…

C#Winform窗体中嵌入exe文件

1&#xff0c;效果以嵌入Modbus Slave为例&#xff1a; 2&#xff0c;代码&#xff1a; public partial class Form1 : Form{//设置嵌入exe的常量private const int nIndex -16;private const int dwNewLong 0x10000000;Process m_AppProcess;public Form1(){InitializeCompo…

VIM模式之间的切换

命令行界面下&#xff0c;常用的文本编辑器是 VI / VIM(VI增强版)&#xff0c;VI 是 Linux 最通用的文本编辑器&#xff0c;VIM相较于VI&#xff0c;提供了代码高亮等功能&#xff0c;两者用法完全兼容&#xff1b; 1. 进入 VIM 工作界面 vim 文件名 2. 进入编辑模式 三种方…

ENSP中OSPF配置

题目 划分网段&#xff0c;配置ip OSPF配置按照区域划分&#xff0c;这个网段也要按照区域个数划分&#xff0c;如这一题&#xff0c;分成两个区域&#xff0c;所以将192.168.1.0/24划分先为两个网段&#xff0c;然后在具体的划分区域中的网段。 以交换机为中心的三条线属于一…

[Qt] Qt Creator中,新建QT文件时选择界面模版下的各选项

在Qt Creator中&#xff0c;新建文件时选择界面模版下的各选项具有特定的意义&#xff0c;这些选项主要帮助开发者根据项目需求快速生成不同类型的文件。以下是对这些选项的详细解释&#xff1a; 0. Qt Item Model 意义&#xff1a;列表模型是Qt中用于表示和操作数据的强大抽…

Android 使用 Debug.startMethodTracing 分析方法耗时

参考 Generate Trace Logs by Instrumenting Your App 官网提供了 trace 工具来分析方法耗时。 生成 trace 文件 package com.test.luodemo.trace;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; import android.os.Debug; import android.uti…

js vue table单元格合并

实现效果 关键代码 <table classtable table-bordered><thead><tr><th>检测项目</th><th>详细说明</th><th>检测结果</th><th>检测说明</th></tr></thead><tbody><tr ng-repeatrow in…

【car】深入浅出学习机械燃油车知识、结构、原理、维修、保养、改装、编程

汽车的五大总成通常是指发动机、变速器、前后桥、车架和悬挂系统。 发动机&#xff1a;是汽车的动力来源&#xff0c;负责将燃料的化学能转化为机械能&#xff0c;驱动汽车行驶。常见的发动机类型有内燃机&#xff08;如汽油发动机、柴油发动机&#xff09;和电动机&#xff0…

ant design pro多页签功能

效果&#xff1a; 原理&#xff1a; 1、所有需要页签页面&#xff0c;都需要一个共同父组件 2、如何缓存&#xff0c;用的是ant的Tabs组件&#xff0c;在共同父组件中&#xff0c;实际是展示的Tabs组件 3、右键&#xff0c;用的是ant的Dropdown组件&#xff0c;当点击时&…

在linux中查找 / 目录下的以.jar结尾的文件(find / -name *.jar)

文章目录 1、查找 / 目录下的以.jar结尾的文件 1、查找 / 目录下的以.jar结尾的文件 [rootiZuf6332h890vozldoxcprZ ~]# find / -name *.jar /etc/java/java-1.8.0-openjdk/java-1.8.0-openjdk-1.8.0.342.b07-1.el9_0.x86_64/lib/security/policy/limited/US_export_policy.ja…

【学习css2】grid布局-页面footer部分保持在网页底部

中间内容高度不够屏幕高度撑不开的页面时候&#xff0c;页面footer部分都能保持在网页页脚&#xff08;最底部&#xff09;的方法 1、首先上图看显示效果 2、奉上源码 2.1、html部分 <body><header>头部</header><main>主区域</main><foot…

在 Linux 上设置 RAID 阵列的全面指南

引言 在这篇博文中&#xff0c;我们将深入探讨如何在 Linux 上设置 RAID 阵列。本文将涵盖 RAID 的定义、架构、原理、应用场景、常见命令体系&#xff0c;并通过详细的实战模拟展示如何在 Linux 系统上实际操作。希望通过这篇文章&#xff0c;您能深入理解 RAID 技术&#xff…

Flutter实现局部刷新的几种方式

目录 前言 1.局部刷新的重要性 1.概念 2.重要性 2.局部刷新实现的几种方式 1.使用setState方法进行局部刷新 2.使用StatefulWidget和InheritedWidget局部刷新UI 3.ValueNotifier和ValueListenableBuilder 4.StreamBuilder 5.Provider 6.GetX 7.使用GlobalKey 前言 …

现在有什么副业可以让人快速上岸?可以试试这个行业上岸其实不难

人为什么要努力赚銭&#xff1f; 当你想结婚的时候&#xff0c; 你可以慢慢挑&#xff0c;不着急。 当父母年老遭遇大病的时候&#xff0c; 你有机会尽孝。 当孩子需要时&#xff0c;你不会囊中羞涩。 年轻时以为金钱最重要&#xff0c; 如今年纪大了&#xff0c;发现这…

CSS在页面中使用的三种方式:行内样式、内嵌式样式表、链接式样式表

CSS样式如何在页面中使用&#xff0c;包含三种方式&#xff1a;行内样式、内嵌式样式表、链接式样式表。 1、行内样式 行内样式是比较直接的一种样式&#xff0c;直接定义在 HTML 标签之内&#xff0c;并通过 style 属性来实现。这种方式比较容易学习&#xff0c;但是灵活性不…

【秋招突围】2024届秋招笔试-字节跳动笔试题-01-三语言题解(Java/Cpp/Python)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 ✨ 本系列打算持续跟新 秋招笔试题 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f4e7; 清隆这边最…