节点调整器

🌐 Node Resizer

这是一个用于 Vue Flow 的调整大小组件。它可以用来调整节点的大小。

🌐 This is a resizer component for Vue Flow. It can be used to resize your nodes.

安装

🌐 Installation

yarn add @vue-flow/node-resizer
  
# or
npm install @vue-flow/node-resizer

用法

🌐 Usage

<script setup>
import { ref } from 'vue'  
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 { NodeResizer } from '@vue-flow/node-resizer'

// make sure to include the necessary styles!
import '@vue-flow/node-resizer/dist/style.css'

defineProps(['data'])
</script>

<template>
  <NodeResizer min-width="100" min-height="30" />

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

启用后，这些属性允许你使用迷你地图在拖动时平移，在滚动时缩放。

🌐 When enabled, these props allow you to pan on drag and zoom on scroll using the MiniMap.

属性

🌐 Props

名称	定义	类型	可选	默认
nodeId	要附加调整大小控件的节点	string	true	来自上下文的节点ID
color	调整线的颜色	string	true	-
handleClassName	调整大小控点的额外类	string	true	-
handleStyle	调整句柄的附加样式	CSS属性	true	-
lineClassName	用于调整大小线的额外类	number	true	-
lineStyle	调整线的附加样式	string	true	-
isVisible	强制显示调整器	boolean	true	true
minWidth	调整器的最小宽度（不能缩小到此值以下）	number	true	-
minHeight	调整器的最小高度（不能调到低于此值）	number	true	-

触发

🌐 Emits

名称
resizeStart
resize
resizeEnd