Перекрёстная подсветка
Перекрёстная подсветка выделяет строку и столбец выбранной ячейки, помогая пользователю быстрее определить активную ячейку.
Режим пресетов
Для перекрёстной подсветки нет отдельного пресета, однако её плагин можно использовать вместе с пресетами.
pnpm add @univerjs/sheets-crosshair-highlightnpm install @univerjs/sheets-crosshair-highlightyarn add @univerjs/sheets-crosshair-highlightbun add @univerjs/sheets-crosshair-highlightИспользование
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'import '@univerjs/sheets-crosshair-highlight/facade'import '@univerjs/sheets-crosshair-highlight/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, SheetsCrosshairHighlightEnUS, ), }, presets: [ UniverSheetsCorePreset(), ], plugins: [ UniverSheetsCrosshairHighlightPlugin, ],})Режим плагинов
Установка
pnpm add @univerjs/sheets-crosshair-highlightnpm install @univerjs/sheets-crosshair-highlightyarn add @univerjs/sheets-crosshair-highlightbun add @univerjs/sheets-crosshair-highlightИспользование
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'import SheetsCrosshairHighlightEnUS from '@univerjs/sheets-crosshair-highlight/locale/en-US'import '@univerjs/sheets-crosshair-highlight/lib/index.css'import '@univerjs/sheets-crosshair-highlight/facade'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( SheetsCrosshairHighlightEnUS, ), },})univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin)Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs/sheets-crosshair-highlight | UniverSheetsCrosshairHighlightPlugin | UniverSheetsCrosshairHighlightMobileUIPlugin |
Facade API
Полные определения типов Facade API доступны в справочнике FacadeAPI.
Импорт
Примечание о режиме плагинов
Импортировать пакет Facade вручную требуется только в режиме плагинов. В режиме пресетов соответствующий пакет Facade уже подключён, поэтому дополнительный импорт не нужен.
import '@univerjs/sheets-crosshair-highlight/facade'Включение и отключение перекрёстной подсветки
univerAPI.setCrosshairHighlightEnabled(true)univerAPI.setCrosshairHighlightEnabled(false)Проверка состояния перекрёстной подсветки
univerAPI.getCrosshairHighlightEnabled()Обработчики событий
Полные определения типов событий доступны в разделе Events.
Событие CrosshairHighlightEnabledChanged срабатывает при изменении состояния перекрёстной подсветки.
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => { const { enabled, workbook, worksheet } = params})// Remove the event listener using `disposable.dispose()`Событие CrosshairHighlightColorChanged срабатывает при изменении цвета перекрёстной подсветки.
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => { const { color, workbook, worksheet } = params})// Remove the event listener using `disposable.dispose()`Насколько полезно это руководство?