节点工具栏

¥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	任何内容的默认工具栏插槽