节点工具栏

🌐 Node Toolbar

这是一个用于 Vue Flow 的工具栏组件。它可以用于在节点旁边创建浮动工具栏。你可以通过设置 visibility 属性来显示工具栏，也可以在选中节点时自动显示工具栏。

🌐 This is a toolbar component for Vue Flow. It can be used to create a floating Toolbar next to your nodes. You can either display the Toolbar by setting the visibility prop or automatically showing the Toolbar on selected nodes.

安装

🌐 Installation

yarn add @vue-flow/node-toolbar

# or
npm install @vue-flow/node-toolbar

用法

🌐 Usage

<script setup>
import { VueFlow } from '@vue-flow/core'
import initialNodes from './initialNodes'

// some nodes and edges
const nodes = ref(initialNodes)
</script>

<template>
  <VueFlow :nodes="nodes">
    <template #node-custom="nodeProps">
      <CustomNode :data="nodeProps.data" />
    </template>
  </VueFlow>
</template>

<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'

interface NodeData {
  toolbarVisible: boolean
  toolbarPosition: Position
}

interface Props {
  data: NodeData
  label: string
}

defineProps<Props>()
</script>

<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
    <button>delete</button>
    <button>copy</button>
    <button>expand</button>
  </NodeToolbar>

  <Handle type="target" :position="Position.Left" />
  <Handle type="source" :position="Position.Right" />
</template>

属性

🌐 Props

名称	定义	类型	可选	默认
nodeId	工具栏应该附着的节点	字符串数组	true	来自上下文的节点ID
isVisible	强制显示工具栏	boolean	true	选定节点
position	工具栏位置（顶部、左侧、右侧、底部）	位置	true	顶部
offset	工具栏位置偏移	number	true	10

插槽

🌐 Slots

名称	定义
default	用于任何内容的默认工具栏插槽