LogicFlow 学习笔记——10. LogicFlow 进阶边

最新推荐文章于 2026-04-28 14:01:29 发布

原创

最新推荐文章于 2026-04-28 14:01:29 发布 · 2.6k 阅读

标签

#学习 #笔记 #vue #logicflow #typescript

我们可以基于 Vue 组件自定义边，可以在边上添加任何想要的 Vue 组件，甚至将原有的边通过样式隐藏，重新绘制。
如 Example3 中所示：
在这里插入图片描述

锚点

默认情况下，LogicFlow 只记录节点与节点的信息。但是在一些业务场景下，需要关注到锚点，比如在 UML 类图中的关联关系；或者锚点表示节点的入口和出口之类。这个时候需要重写连线的保存方法，将锚点信息也一起保存。

class CustomEdgeModel2 extends LineEdgeModel {
   
   
  // 重写此方法，使保存数据是能带上锚点数据。
  getData() {
   
   
    const data = super.getData();
    data.sourceAnchorId = this.sourceAnchorId;
    data.targetAnchorId = this.targetAnchorId;
    return data;
  }
}

动画

由于 LogicFlow 是基于 svg 的流程图编辑框架，所以我们可以给 svg 添加动画的方式来给流程图添加动画效果。为了方便使用，我们也内置了基础的动画效果。在定义边的时候，可以将属性isAnimation设置为 true 就可以让边动起来，也可以使用lf.openEdgeAnimation(edgeId)来开启边的默认动画。

class CustomEdgeModel extends PolylineEdgeModel {
   
   
  setAttributes() {
   
   
    this.isAnimation = true;
  }
  getEdgeAnimationStyle() {
   
   
    const style = super.getEdgeAnimationStyle();
    style.strokeDasharray = "5 5";
    style.animationDuration = "10s";
    return style;
  }
}

下面我们对上面的内容写一个简单的样例：
样例中使用了 JSX 所以需要进行配置，在项目中，运行pnpm install @vitejs/plugin-vue-jsx并在vite.config.js增加如下配置：

import {
   
    defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
   
   
  plugins: [vue(), vueJsx()]
});

新建src/views/Example/LogicFlowAdvance/Edge/Example01/CustomCard.vue代码如下：

<script setup lang="tsx">
import {
     
      ref } from 'vue'

const props = defineProps({
     
     
  properties: {
     
     
    type: Object,
    required: true
  }
})

type Answer = {
     
     
  text: string
  id: string
}

type Properties = {
     
     
  title: string
  content: string
  answers: Answer[]
}

// Example props passed to the component
const properties = ref(props.properties as Properties)
</script>
<template>
  <div class="html-card">
    <!-- <ElButton οnclick="alert(123)" type="primary" style="margin-left: 15px">Title</ElButton> -->
    <div class="html-card-header">{
  
  { properties.title }}</div>
    <div class="html-card-body">{
  
  { properties.content }}</div>
    <div class="html-card-footer">
      <div v-for="answer in properties.answers" :key="answer.id" class="html-card-label">
        {
  
  { answer.text }}
      </div>
    </div>
  </div>
</template>
<style scoped>
.html-card {
     
     
  width: 240px;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-sizing: border-box;
  padding: 5px;
}
/* 定义节点不被允许连接的时候，节点样式 */
.lf-node-not-allow .html-card {
     
     
  border-color<