---
title: "SigmaZoomControl"
description: "放大、缩小、复位三个按钮，图标可经具名插槽替换，行为与无障碍结构由库提供。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/components/zoom-control"
---
# SigmaZoomControl

> 放大、缩小、复位三个按钮，图标可经具名插槽替换，行为与无障碍结构由库提供。

## 用法

放进 `SigmaControls` 即可，内部走 [`useSigmaCamera()`](https://sigma.mhaibaraai.cn/docs/composables/use-sigma-camera)。

### `factor`

放大与缩小每次按 `factor` 倍缩放。复位**不吃这个 prop**——它调的是相机的 `reset()`，回到初始视角这件事没有倍数可言：

```vue [ZoomControlFactorExample.vue]
<script setup lang="ts">
defineProps<{ factor?: number }>()

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="top-right">
      <SigmaZoomControl :factor="Number(factor)" />
    </SigmaControls>
  </SigmaGraph>
</template>
```

> [!NOTE]
> 
> 需要「容纳全图」而不是「回到初始视角」，用 
> 
> useSigmaCamera().fitTo()
> 
>  自己接一个按钮，那需要可选 peer 
> 
> @sigma/utils
> 
> 。

### `duration`

三个按钮的动画时长，单位毫秒。

```vue [ZoomControlDurationExample.vue]
<script setup lang="ts">
defineProps<{ duration?: number }>()

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="top-right">
      <SigmaZoomControl :duration="Number(duration)" />
    </SigmaControls>
  </SigmaGraph>
</template>
```

### `reset`

复位按钮的显隐。`false` 时该按钮整个不渲染，而不是置灰：

```vue [ZoomControlResetExample.vue]
<script setup lang="ts">
defineProps<{ reset?: boolean }>()

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="top-right">
      <SigmaZoomControl :reset="reset" />
    </SigmaControls>
  </SigmaGraph>
</template>
```

### `labels`

三项依次对应放大、缩小、复位，同时用作 `aria-label` 与 `title`，悬浮按钮即可看到。

```vue [ZoomControlLabelsExample.vue]
<script setup lang="ts">
defineProps<{ labels?: [string, string, string] }>()

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="top-right">
      <SigmaZoomControl :labels="labels" />
    </SigmaControls>
  </SigmaGraph>
</template>
```

> [!NOTE]
> 
> reset
> 
>  为 
> 
> false
> 
>  时复位按钮不渲染，
> 
> labels
> 
>  的第三项随之无效。

## 示例

### 图标插槽

三个按钮各有具名插槽——`zoom-in`、`zoom-out`、`reset`。它们都没有作用域，**只负责图标**：点击行为、`type="button"`、`aria-label`、`title` 都由库提供，接管外观不会丢掉无障碍结构。

```vue [ZoomControlSlotExample.vue]
<script setup lang="ts">
const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="top-right">
      <SigmaZoomControl :labels="['放大', '缩小', '回到全图']">
        <template #zoom-in>
          <UIcon name="i-lucide-zoom-in" />
        </template>
        <template #zoom-out>
          <UIcon name="i-lucide-zoom-out" />
        </template>
        <template #reset>
          <UIcon name="i-lucide-square-mouse-pointer" />
        </template>
      </SigmaZoomControl>
    </SigmaControls>
  </SigmaGraph>
</template>
```

默认图标是 `+`、`−`（U+2212 减号，不是连字符）、`⌖`；`reset` 插槽仅在 `reset` 为 `true` 时渲染。

## API

### Props

```ts
/**
 * Props for the SigmaZoomControl component
 */
interface SigmaZoomControlProps {
  /**
   * 每次缩放的倍数
   * @default 1.5
   */
  factor?: number | undefined;
  /**
   * 缩放动画时长，单位毫秒
   * @default 200
   */
  duration?: number | undefined;
  /**
   * 是否显示复位按钮
   * @default true
   */
  reset?: boolean | undefined;
  /**
   * 无障碍标签，依次为放大、缩小、复位
   * @default ["放大", "缩小", "复位"]
   */
  labels?: [string, string, string] | undefined;
}
```

### Slots

```ts
/**
 * Slots for the SigmaZoomControl component
 */
interface SigmaZoomControlSlots {
  zoom-in(): any;
  zoom-out(): any;
  reset(): any;
}
```


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.