画布缩放 OkrTreeViewport

<template>
  <okr-tree-viewport ref="vp" toolbar :wheel-behavior="wheelMode">
    <vue-okr-tree :data="orgData" node-key="id" direction="horizontal" show-collapsable />
    <template #toolbar="{ zoom, zoomIn, zoomOut, reset, fit }">
      <button @click="zoomOut()">−</button>
      <span>{{ Math.round(zoom * 100) }}%</span>
      <button @click="zoomIn()">＋</button>
      <button @click="reset()">重置</button>
      <button @click="fit()">适应窗口</button>
      <button @click="exportPng()">导出 PNG</button>
    </template>
  </okr-tree-viewport>
</template>

<script setup>
import { ref } from 'vue'
import { toPng } from 'html-to-image'
import { OkrTreeViewport, VueOkrTree } from 'vue3-okr-tree'

const vp = ref(null)
const wheelMode = ref('ctrl-zoom') // ctrl-zoom（默认）/ zoom / scroll
const orgData = ref([{ id: 1, label: 'xxx科技有有限公司', children: [/* ... */] }])

function exportPng() {
  // 传入 toPng 可免去动态 import 依赖；不传则按需 import('html-to-image')
  vp.value.exportImage({ type: 'png', scale: 2, background: '#fff', toPng })
}
</script>