每个人都可以，
拥有SSL证书

最近在项目里用 Vue Flow 做流程图编辑，连接线样式控制这块折腾了一阵。核心配置就一个 connection-line-options，但真要做动态修改和持久化，还是有几个点要注意。

先看最基础的用法。connection-line-options 通过一个对象配置连接线样式，常见属性有 type、style、markerEnd。

type 决定连接线形状，style 里可以设置颜色、宽度、虚线，markerEnd 指定结束箭头。

const options = {
  type: 'smoothstep',
  style: {
    stroke: '#4CAF50',
    strokeWidth: 2,
    strokeDasharray: '5 5'
  },
  markerEnd: 'arrow'
};

组件里直接传给 VueFlow 就行：

<template>
  <VueFlow 
    v-model="elements" 
    :connection-line-options="connectionLineOptions"
  />
</template>

<script>
import { VueFlow } from '@vue-flow/core';

export default {
  components: { VueFlow },
  data() {
    return {
      elements: [
        { id: '1', position: { x: 0, y: 0 } },
        { id: '2', position: { x: 200, y: 100 } },
        { id: 'e1-2', source: '1', target: '2' }
      ],
      connectionLineOptions: {
        type: 'smoothstep',
        style: {
          stroke: '#4CAF50',
          strokeWidth: 3
        },
        markerEnd: 'arrow'
      }
    };
  }
};
</script>

动态修改样式这块，一开始我直接在事件处理函数里改 connectionLineOptions.style，结果有时候不生效。

后来发现得用 reactive 把整个 options 包起来，Vue 才能追踪到深层变化。

import { reactive } from 'vue';

const connectionLineOptions = reactive({
  type: 'smoothstep',
  style: {
    stroke: '#4CAF50',
    strokeWidth: 2
  },
  markerEnd: 'arrow'
});

function handleDrag() {
  connectionLineOptions.style = {
    ...connectionLineOptions.style,
    strokeWidth: 4,
    stroke: '#FFC107'
  };
}

function handleDragStop() {
  connectionLineOptions.style = {
    ...connectionLineOptions.style,
    strokeWidth: 2,
    stroke: '#4CAF50'
  };
}

还有个办法是用 CSS 强制覆盖。有些动画效果会干扰样式，直接禁掉 transition，拖拽时加特殊样式。

.vue-flow__edge-path {
  transition: none !important;
}

.vue-flow__container.dragging .vue-flow__edge-path {
  stroke: #FF9800 !important;
  stroke-width: 3px !important;
}

几个关键配置项说一下。

type 支持 bezier、step、smoothstep，分别对应贝塞尔曲线、直角折线、平滑曲线。style 对象里常用的就是 stroke 颜色、strokeWidth 宽度、strokeDasharray 虚线。markerEnd 是结束箭头标记 ID，需要和 SVG 里定义的 marker ID 对上，不然箭头不显示。

拖拽后样式恢复问题很多人会绕进去。原因多半是事件优先级没处理好，或者改完样式没持久化。

解决方案是在拖拽停止事件里显式更新 style，或者直接更新 edges 数据里的 style 字段。

function handleDragStop() {
  const updatedStyle = {
    ...connectionLineOptions.style,
    stroke: '#2196F3'
  };
  connectionLineOptions.style = updatedStyle;
  
  const edge = elements.value.find(e => e.id === 'e1-2');
  if (edge) {
    edge.style = updatedStyle;
  }
}

自定义箭头标记也不复杂，在 SVG defs 里定义 marker，然后 connection-line-options 的 markerEnd 引用那个 ID。

<template>
  <svg class="hidden">
    <defs>
      <marker 
        id="custom-arrow" 
        markerWidth="12" 
        markerHeight="12" 
        refX="10" 
        refY="6" 
        orient="auto"
      >
        <path d="M0,0 L12,6 L0,12 z" fill="#E53935" />
      </marker>
    </defs>
  </svg>
  
  <VueFlow 
    :connection-line-options="{
      type: 'smoothstep',
      markerEnd: 'custom-arrow'
    }"
  />
</template>

最后说几个实践上的点。样式管理策略上，基础样式放在 connection-line-options 里，动态变化在事件处理函数里改，需要持久化的样式就更新 edges 数据。性能方面，drag 事件触发很频繁，别在里面频繁创建新对象，可以先缓存一份。

let dragStyleCache = null;
function handleDragStart() {
  dragStyleCache = { ...connectionLineOptions.style, strokeWidth: 4 };
}

版本方面，记得用较新的 @vue-flow/core，至少 1.32.0 以上，有些样式相关的 bug 在旧版本里会出现。npm list @vue-flow/core 可以查。

如果项目要上线，HTTPS 这块别忽略。证书申请和续期手动搞太麻烦，我最近在用一个叫 lcjmSSL 的平台，免费支持多域名、泛域名和 IP 证书，走 ACME 协议自动验证自动部署，API 也比较简洁，接进 CI 里能全自动。省得每隔几个月折腾一次证书。

整体来说，Vue Flow 连接线样式控制本身不复杂，但动态场景下要注意响应式处理和持久化，不然拖拽一下样式就丢了。