四、LogicFlow 自定义左侧菜单Menu

2024-08-28 23:12

本文主要是介绍四、LogicFlow 自定义左侧菜单Menu,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

    • 前文
    • LogicFlow 介绍
    • 实现基础界面框架
    • 实现左侧菜单组件
    • 将左侧菜单引入到demo组件中
    • 最后

在这里插入图片描述

前文

这篇相对来讲就稍微平凡了一点,只要有前端的一些基础就能够轻松完成上图中左侧的菜单,但是为了能够让前后文章能够连贯起来,所以还是要厚着脸皮再写一篇。

有人可能要问了,为啥不将图中的功能完全实现呢,那是因为会直接导致篇幅过长,不利于阅读,思路不够清晰。

下一章节将实现 自定义节点

LogicFlow 介绍

LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端研发自定义开发各种逻辑编排场景,如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

实现基础界面框架

在这里插入图片描述

<template><div class="demo-wrp"><div class="demo-nemu"></div><div class="demo-container"><div class="demo-control-wrp"></div><div class="demo-canvas-wrp" ref="diagram"></div></div></div>
</template><script>
// 引入LogicFlow核心包
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';export default ({name: 'demo',data () {return {// 模拟数据mockData: {nodes: [{ id: "1", type: "rect", x: 100, y: 100, text: "节点1" },{ id: "2", type: "circle", x: 300, y: 100, text: "节点2" },],edges: [{sourceNodeId: "1",targetNodeId: "2",type: "polyline",text: "连线",startPoint: {x: 140,y: 100,},endPoint: {x: 250,y: 100,},},],}}},mounted () {// 创建实例const lf = new LogicFlow({container: this.$refs.diagram,// ... 其他的一些配置})/* 开启渲染如果不要模拟数据,直接使用 lf.render() 即可。**/lf.render(this.mockData);// 渲染到视图中心为止,否则在左上角显示lf.translateCenter();}
})</script><style scoped lang="less">
// 定义操控区域高度
@HEADER_HEIGHT: 50px;
// 定义菜单和操控区域背景色
@BG_COLOR: #f3f3f3;.demo-wrp{width: 100%;height: 100%;overflow: hidden;display: flex;align-items: flex-start;justify-content: space-between;.demo-nemu{width: 200px;height: 100%;overflow-y: auto;background-color: @BG_COLOR;border-right: 1px solid #ddd;&::-webkit-scrollbar {width: 4px;background-color: #eeeeee;}&::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.01);border-radius: 0;background: rgba(0, 0, 0, 0);}&::-webkit-scrollbar-thumb {border-radius: 40px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);background: rgba(0, 0, 0, 0);}}.demo-container{flex: 1;height: 100%;background-color: @BG_COLOR;.demo-control-wrp{width: 100%;height: @HEADER_HEIGHT;display: flex;align-items: center;justify-content: flex-end;border-bottom: 1px solid #ddd;padding: 0 20px;}.demo-canvas-wrp{width: 100%;height: calc(100% - @HEADER_HEIGHT);}}
}</style>

实现上面的界面布局还是相当简单的,如果对样式感觉很困惑,那就只有多敲多练了。

另外根据如上代码在 vscode 中,样式部分可能会标红,不影响使用,代码也是生效的。

在这里插入图片描述

如果觉得看着不顺眼那也很简单,只需要在同级目录下创建一个 less 格式的文件,然后把样式拷贝进去,再将这个 less 文件引入到当前使用的组件中,如下所示:

<style lang="less" scoped>@import url('./index.less');
</style>

实现左侧菜单组件

基础的界面框架已经搭建好了,那么接下来就要实现左侧菜单了,为了让界面结构逻辑更加的清晰,建议是将菜单部分单独作为一个组件进行使用。

在 demo 目录下创建 components 目录,专门用来处理 LogicFlow 相关的组件,到时候如需其他项目也要使用的时候,直接拷贝过去就能投产,极大便利降低使用成本。

<template><ul class="diagram-sidebar"><li v-for="groupItem in leftDataList" :key="groupItem.key"><h1 class="node-category-title">{{ groupItem.groupName }}</h1><template v-if="Array.isArray(groupItem.nodes) && groupItem.nodes.length > 0"><div v-for="item in groupItem.nodes" :key="item.type" class="left-bar-item" :class="getClassFn"  :style="getItemStyleFn(item)" @mousedown="dragInNode(item.type)"><img class="icon" :src="item.icon" alt=""><p class="name" :style="`color:${item.borderColor};`">{{item.name}}</p></div></template></li></ul>
</template><script>
import { InitNodeData, CanNotEdit } from './NodeEnum';
export default ({name: 'leftMenu',props: {taskDetail: Object,},data() {return {leftDataList: [{groupName: '分组-1',key: 'marketing',nodes: [{icon: require('../assets/lfCanvas/leftIcon/singleCrowd.svg'),type: 'SINGLE_CROWD',borderColor: 'rgba(71, 98, 254, 1)',backgroundColor: 'rgba(71, 98, 254, 0.1)',name: '单个信息',},{icon: require('../assets/lfCanvas/leftIcon/batchCrowd.svg'),type: 'BATCH_CROWD',borderColor: 'rgba(71, 98, 254, 1)',backgroundColor: 'rgba(71, 98, 254, 0.1)',name: '批量信息',},{icon: require('../assets/lfCanvas/leftIcon/ruleCrowd.svg'),type: 'RULE_CROWD',borderColor: 'rgba(71, 98, 254, 1)',backgroundColor: 'rgba(71, 98, 254, 0.1)',name: '信息规则',},],},{groupName: '分组-2',key: 'target',nodes: [{icon: require('../assets/lfCanvas/leftIcon/goalCrowd.svg'),type: 'GOAL_CROWD',borderColor: 'rgba(64, 158, 255, 1)',backgroundColor: 'rgba(64, 158, 255, 0.1)',name: '目标',},],},{groupName: '分组-3',key: 'compute',nodes: [{icon: require('../assets/lfCanvas/leftIcon/compute/icon-compute-merge.svg'),type: 'MERGE',borderColor: 'rgba(255, 180, 30, 1)',backgroundColor: 'rgba(255, 180, 30, 0.15)',name: '合并',},{icon: require('../assets/lfCanvas/leftIcon/compute/icon-compute-split.svg'),type: 'SPLIT',borderColor: 'rgba(255, 180, 30, 1)',backgroundColor: 'rgba(255, 180, 30, 0.15)',name: '拆分',},{icon: require('../assets/lfCanvas/leftIcon/compute/icon-compute-unique.svg'),type: 'UNIQUE',borderColor: 'rgba(255, 180, 30, 1)',backgroundColor: 'rgba(255, 180, 30, 0.15)',name: '排重',},{icon: require('../assets/lfCanvas/leftIcon/compute/icon-compute-intersection.svg'),type: 'AND',borderColor: 'rgba(255, 180, 30, 1)',backgroundColor: 'rgba(255, 180, 30, 0.15)',name: '交集',},{icon: require('../assets/lfCanvas/leftIcon/compute/icon-compute-exclude.svg'),type: 'EXCLUDE',borderColor: 'rgba(255, 180, 30, 1)',backgroundColor: 'rgba(255, 180, 30, 0.15)',name: '排除',},{icon: require('../assets/lfCanvas/leftIcon/compute/icon-compute-spread.svg'),type: 'SPREAD',borderColor: 'rgba(255, 180, 30, 1)',backgroundColor: 'rgba(255, 180, 30, 0.15)',name: '智能扩散',},{icon: require('../assets/lfCanvas/leftIcon/compute/icon-compute-sort.svg'),type: 'SORT',borderColor: 'rgba(255, 180, 30, 1)',backgroundColor: 'rgba(255, 180, 30, 0.15)',name: '高能排序',},],},{groupName: '分组-4',key: 'touch',nodes: [{icon: require('../assets/lfCanvas/leftIcon/dongdong.svg'),type: 'DONGDONG',borderColor: 'rgba(0, 200, 100, 1)',backgroundColor: 'rgba(0, 200, 100, 0.1)',name: '消息',},{icon: require('../assets/lfCanvas/leftIcon/sms.svg'),type: 'SMS',borderColor: 'rgba(0, 200, 100, 1)',backgroundColor: 'rgba(0, 200, 100, 0.1)',name: '短信',},],},],}},computed: {// 拖拽和禁用拖拽按钮状态getClassFn(){return this.canDrag ? 'cursor-not-allowed' : 'cursor-pointer'},// 判断是否可被拖拽(先注释)canDrag() {// return this.canvasType === 'detail' || CanNotEdit.includes(this.taskDetail?.canvasStatus?.toString());},canvasType() {const QUERY_TYPE = this.$router.history.current.query.type;console.log('QUERY_TYPE::', QUERY_TYPE);return QUERY_TYPE;},},mounted() {},methods: {getMenuIconObj(item) {return {icon: item.icon,name: item.name}},// 动态设置样式getItemStyleFn(item){return `border: 1px solid ${item.borderColor};background-color:${item.backgroundColor};`},// 数据按下事件,主要是获取菜单的type类型dragInNode(type) {const that = this;console.log('dragInNode', that.canDrag, that.taskDetail);if (that.canDrag) return;// that.$emit('dragInNode', {//     type,//     properties: {//         ...InitNodeData[type],//     },// });},}
})
</script><style lang="less" scoped>
.diagram-sidebar {user-select: none;flex-basis: 200px;padding: 13px 25px;.node-category-title {font-family: PingFang SC;font-size: 14px;font-weight: 600;line-height: 22px;text-align: left;margin-bottom: 12px;}.cursor-pointer {cursor: pointer;}.cursor-not-allowed {cursor: not-allowed;}.left-bar-item{width: 140px;height: 38px;border-radius: 8px;display: flex;align-items: center;justify-content: flex-start;gap: 8px;margin-bottom: 12px;padding-left: 24px;.icon{width: 16px;height: 16px;}.name{font-family: PingFang SC;font-size: 14px;font-weight: 400;line-height: 22px;text-align: left;}}
}
</style>

实现效果如下:
在这里插入图片描述

这样就实现了一个自定义的左侧菜单,这样可以根据自己的需要手动引入到对应的组件中进行使用,但是需要注意一点的是在 script标签 中引入的外部文件是否存在,地址是否正确。

将左侧菜单引入到demo组件中

<template><div class="demo-wrp"><div class="demo-nemu"><LeftMenu :taskDetail="taskDetail" /></div><div class="demo-container"><div class="demo-control-wrp"></div><div class="demo-canvas-wrp" ref="diagram"></div></div></div>
</template><script>// 引入LogicFlow核心包
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';// 引入组件
import LeftMenu from './components/LeftMenu';export default ({name: 'demo',data () {return {// ...taskDetail: {},// ...}},components: {LeftMenu,},// 其他...
})</script>

最后

关于自定义左侧菜单到这里也就结束了,只要会点 Vue 都能够看懂,一点都不难,所以也没啥好讲的。

下一篇将讲解如何将左侧的按钮拖拽到右侧的画布。

这一篇到此结束,拜拜。

在这里插入图片描述

这篇关于四、LogicFlow 自定义左侧菜单Menu的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1116154

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件,把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

Spring 源码解读:自定义实现Bean定义的注册与解析

引言 在Spring框架中,Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义,Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制,帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry,以全面掌握Bean注册和解析的核心原理。

Windows如何添加右键新建菜单

Windows如何添加右键新建菜单 文章目录 Windows如何添加右键新建菜单实验环境缘起以新建`.md`文件为例第一步第二步第三步 总结 实验环境 Windows7 缘起 因为我习惯用 Markdown 格式写文本,每次新建一个.txt后都要手动修改为.md,真的麻烦。如何在右键新建菜单中添加.md选项呢? 网上有很多方法,这些方法我都尝试了,要么太麻烦,要么不凑效

Oracle type (自定义类型的使用)

oracle - type   type定义: oracle中自定义数据类型 oracle中有基本的数据类型,如number,varchar2,date,numeric,float....但有时候我们需要特殊的格式, 如将name定义为(firstname,lastname)的形式,我们想把这个作为一个表的一列看待,这时候就要我们自己定义一个数据类型 格式 :create or repla

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" d

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明: 首次发表日期:2024-09-08PlantUML官网: https://plantuml.com/zh/PlantUML命令行文档: https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi

argodb自定义函数读取hdfs文件的注意点,避免FileSystem已关闭异常

一、问题描述 一位同学反馈,他写的argo存过中调用了一个自定义函数,函数会加载hdfs上的一个文件,但有些节点会报FileSystem closed异常,同时有时任务会成功,有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎,对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例,然后迭代调用evaluate。通过代码分析,udf在

鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图 #思路 创建带有 @CustomDialog 修饰的组件 ,并且在组件内部定义controller: CustomDialogController 实例化CustomDialogController,加载组件,open()-> 打开对话框 , close() -> 关闭对话框 #定义弹窗 (CustomDialog)是什么? CustomDialog是自定义弹窗,可用于广告、中