Appearance
控件
🌐 Controls
控制面板包含放大、缩小、适合视图和锁定/解锁按钮。
🌐 The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button.
安装
🌐 Installation
bash
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.
WARNING
请确保你也导入了样式，因为这些不再是默认主题的一部分。
vue
<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
| 名称 | 定义 | 类型 | 可选 | 默认 |
|---|---|---|---|---|
| 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 | 交互已解锁图标 |