主题

让我们了解一下 Vue Flow 开箱即用的库样式、定制机会和其他功能。

库样式

Vue Flow 重视灵活性，让您在样式方面占据主导地位。它展示了一些必须导入的强制性样式，同时将默认主题等可选功能留给您的偏好。

要导入必要和可选的样式：

/* 这些是VueFlow的必要样式 */
@import '@vue-flow/core/dist/style.css';

/* 这包含了默认的主题，这些是可选的样式 */
@import '@vue-flow/core/dist/theme-default.css';

调整默认主题

Vue Flow 默认主题作为您的基准，您可以根据自己的喜好使用 CSS 规则、样式和类属性以及 CSS 变量进行自定义和装饰。

使用 CSS 类进行样式设置

您可以按照以下步骤使用 CSS 类来添加流行颜色或更改主题的字体样式：

/* 为我们的自定义节点使用紫色主题 */
.vue-flow__node-custom {
    background: purple;
    color: white;
    border: 1px solid purple;
    border-radius: 4px;
    box-shadow: 0 0 0 1px purple;
    padding: 8px;
}

（译者：这里是一个带样式的节点画布，具体对比原链接，我这里显示不出来）

​

您还可以直接将样式或类属性传递给 Vue Flow 组件和节点/边。

下面是一些有关如何执行此操作的示例：

直接设置 Vue Flow 组件的样式：

<VueFlow
  :nodes="nodes"
  :edges="edges"
  class="my-diagram-class"       // [!code]
  :style="{ background: 'red' }" // [!code]
/>

使用样式或类属性设置节点/边的样式：

/* 通过分配类和样式属性自定义节点 */
const nodes = ref([
  { 
    id: '1', 
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
    
    // 向节点添加类名                  // [!code]
    class: 'my-custom-node-class',   // [!code]
    
    // 您可以传递一个包含CSSProperties或CSS变量的对象                          // [!code]
    style: { backgroundColor: 'green', width: '200px', height: '100px' }, // [!code]
  },
])

使用 CSS 变量重新定义样式

部分已定义的主题样式可使用 CSS 变量进行覆盖。这些更改可全局实施，也可针对单个元素实施。

/* 全局默认的CSS变量值 */
:root {
    --vf-node-bg: #fff;
    --vf-node-text: #222;
    --vf-connection-path: #b1b1b7;
    --vf-handle: #555;
}

CSS 变量

以下是您可以考虑的 CSS 变量的简明列表及其效果：

多变的	影响
–vf 节点颜色	定义节点边框、框阴影和手柄颜色
--vf-box 阴影	定义节点 box-shadow 的颜色
--vf-节点-bg	定义节点背景颜色
–vf 节点文本	定义节点文本颜色
--vf 句柄	定义节点句柄颜色
--vf-连接路径	定义连接线颜色

CSS 类名

在这里您可以找到类名及其各自元素的便捷参考指南：

容器

姓名	容器
.vue-flow	外容器
.vue-flow__container	容器元素的包装器
.vue-flow__viewport	内容器
.vue-flow__background	背景组件
.vue-flow__minimap	MiniMap 组件
.vue-flow__controls	控制组件

边

姓名	描述
.vue-flow__edges	包装器渲染边缘
.vue-flow__edge	包裹每个边缘元素
.vue-flow__selectionpane	处理用户选择的窗格
.vue-flow__selection	定义当前用户选择框
.vue-flow__edge-	边缘类型（自定义或默认）
.vue-flow__edge.selected	定义当前选定的边
.vue-flow__edge.animated	定义动画边缘
.vue-flow__edge-path	边缘元素的 SVG 路径
.vue-flow__edge-text	边缘标签包装
.vue-flow__edge-textbg	边缘标签周围的背景包装
.vue-flow__connectionline	连接线元素的容器
.vue-flow__connection	单独的连接线元件
.vue-flow__connection-path	连接线的 SVG 路径

节点

姓名	描述
.vue-flow__nodes	节点周围的渲染包装器
.vue-flow__node	包裹每个节点元素
.vue-flow__node.selected	定义当前选定的节点
.vue-flow__node-	节点类型（自定义或默认）
.vue-flow__nodesselection	定义节点的选择矩形

节点句柄

姓名	描述
.vue-flow__handle	节点句柄元素的包装器
.vue-flow__handle-bottom	定义底部的手柄
.vue-flow__handle-top	定义顶部的手柄
.vue-flow__handle-left	定义左侧的手柄
.vue-flow__handle-right	定义右侧的手柄
.vue-flow__handle-connecting	连接线在手柄上方
.vue-flow__handle-valid	连接线通过句柄，具有有效连接