节点调整器

¥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	用于调整大小句柄的附加样式	CSSProperties	true	*
lineClassName	用于调整大小线条的额外类	number	true	*
lineStyle	用于调整大小线条的附加样式	string	true	*
isVisible	强制显示调整器	boolean	true	true
minWidth	调整器的最小宽度（无法调整到低于此值）	number	true	*
minHeight	调整器的最小高度（无法调整到低于此值）	number	true	*

触发

¥Emits

名称
resizeStart
resize
resizeEnd