55 lines
1.8 KiB
Markdown
55 lines
1.8 KiB
Markdown
|
---
|
|||
|
|
title: useMenuModel
|
|||
|
|
description: Создание моделей меню приложения и холста на основе текущего состояния редактора.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# useMenuModel
|
|||
|
|
|
|||
|
|
`useMenuModel()` строит высокоуровневые структуры меню поверх команд редактора и состояния выделения.
|
|||
|
|
|
|||
|
|
Полезен, когда нужны готовые к рендерингу группы меню вместо ручной компоновки команд.
|
|||
|
|
|
|||
|
|
## Использование
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
import { useMenuModel } from '@open-pencil/vue'
|
|||
|
|
|
|||
|
|
const { appMenu, canvasMenu, selectionLabelMenu } = useMenuModel()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Базовый пример
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
const { canvasMenu } = useMenuModel()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Рендерите `canvasMenu.value` в ваш компонент контекстного меню.
|
|||
|
|
|
|||
|
|
## Практические примеры
|
|||
|
|
|
|||
|
|
### Верхнее меню в стиле приложения
|
|||
|
|
|
|||
|
|
`appMenu` группирует пункты в:
|
|||
|
|
|
|||
|
|
- Правка
|
|||
|
|
- Вид
|
|||
|
|
- Объект
|
|||
|
|
- Расположение
|
|||
|
|
|
|||
|
|
### Контекстное меню с перемещением между страницами
|
|||
|
|
|
|||
|
|
`canvasMenu` включает динамические пункты, например «Переместить на страницу», исходя из текущего выделения и доступных страниц.
|
|||
|
|
|
|||
|
|
### Метки выделения
|
|||
|
|
|
|||
|
|
`selectionLabelMenu` предоставляет контекстно-зависимые метки:
|
|||
|
|
|
|||
|
|
- `Скрыть` / `Показать`
|
|||
|
|
- `Заблокировать` / `Разблокировать`
|
|||
|
|
|
|||
|
|
## Связанные API
|
|||
|
|
|
|||
|
|
- [useEditorCommands](./use-editor-commands)
|
|||
|
|
- [useSelectionState](./use-selection-state)
|
|||
|
|
- [useSelectionCapabilities](./use-selection-capabilities)
|