MiniMap

安装

¥Installation

yarn add @vue-flow/minimap
  
# or
npm install @vue-flow/minimap

用法

¥Usage

要使用小地图，只需将 MiniMap 组件作为子组件传递给 VueFlow 组件即可。

¥To use the minimap simply pass the MiniMap component as a child to the VueFlow component.

警告

请确保你也导入了这些样式，因为它们不再是默认主题的一部分。

¥Make sure you also import the styles as these are not part of the default theme anymore.

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

// import default minimap styles
import '@vue-flow/minimap/dist/style.css'
</script>

<template>
  

<VueFlow>
    <MiniMap />
  </VueFlow>


</template>

交互式迷你地图

¥Interactive MiniMap

可以使用 pannable 和 zoomable 属性使小地图可交互。

¥The minimap can be made interactive by using the pannable and zoomable props.

<template>
  

<VueFlow>
    <MiniMap pannable zoomable />
  </VueFlow>


</template>

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

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

属性

¥Props

名称	定义	类型	可选	默认
nodeColor	节点背景颜色	字符串，MiniMapNodeFunc	true	#fff
nodeStrokeColor	边框颜色	字符串，MiniMapNodeFunc	true	#555
nodeClassName	额外类	字符串，MiniMapNodeFunc	true	*
nodeBorderRadius	边框半径	number	true	5
nodeStrokeWidth	描边宽度	number	true	2
maskColor	迷你地图背景颜色	string	true	rgb(240, 242, 243, 0.7)
pannable	使用 Minimap 进行拖动平移	boolean	true	false
zoomable	使用 Minimap 进行滚轮缩放	boolean	true	false

插槽

¥Slots

名称	定义	属性	默认
node-${node.type}	迷你地图节点槽位	MiniMapNodeProps	MiniMapNode