控件

¥Controls

控制面板包含放大、缩小、适合视图和锁定/解锁按钮。

¥The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.

安装

¥Installation

yarn add @vue-flow/controls

# or
npm install @vue-flow/controls

用法

¥Usage

要使用控件，只需将 Controls 组件作为子组件传递给 VueFlow 组件即可。

¥To use the controls simply pass the Controls 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 { Controls } from '@vue-flow/controls'

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

<template>
  

<VueFlow>
    <Controls />
  </VueFlow>


</template>

属性

¥Props

名称	定义	类型	可选	默认
showZoom	显示缩放按钮	boolean	true	true
showFitView	显示适合视图按钮	boolean	true	true
showInteractive	显示锁定交互按钮	boolean	true	true
showZoom	显示缩放按钮	boolean	true	true
fitViewParams	点击适合视图按钮时使用的参数	FitViewParams	true	*

触发

¥Emits

名称	定义
zoom-in	点击放大按钮
zoom-out	点击缩小按钮
fit-view	点击适合视图按钮
interaction-change	交互锁定/解锁

插槽

¥Slots

控制按钮

¥Control Buttons

名称	定义
top	默认按钮上方的插槽
control-zoom-in	放大按钮
control-zoom-out	缩小按钮
control-fit-view	适合视图按钮
control-interactive	交互按钮
default	默认按钮下方的插槽

图标

¥Icons

名称	定义
icon-zoom-in	放大图标
icon-zoom-out	缩小图标
icon-fit-view	适合视图图标
icon-lock	交互锁定图标
icon-unlock	交互解锁图标