Web SDK

십자선 강조 표시

Plugin 정보

십자선 강조 표시는 현재 선택한 셀의 행과 열을 강조하여 사용자가 활성 셀을 더 쉽게 식별할 수 있도록 합니다.

플러그인 모드

설치

Shell
pnpm add @univerjs/sheets-crosshair-highlight

사용법

TypeScript
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-highlightUniverSheetsCrosshairHighlightPluginUniverSheetsCrosshairHighlightMobileUIPlugin

프리셋 모드

십자선 강조 표시 기능은 별도의 프리셋 모드를 제공하지 않지만, 해당 플러그인을 프리셋과 함께 사용할 수 있습니다.

Shell
pnpm add @univerjs/sheets-crosshair-highlight

사용법

TypeScript
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,   ],})

Facade API

전체 Facade API 타입 정의는 FacadeAPI에서 확인할 수 있습니다.

가져오기

플러그인 모드 참고 사항

플러그인 모드에서만 Facade 패키지를 직접 가져와야 합니다. 프리셋 모드에는 해당 Facade 패키지가 이미 포함되어 있으므로 추가로 가져올 필요가 없습니다.

TypeScript
import '@univerjs/sheets-crosshair-highlight/facade'

십자선 강조 표시 전환

TypeScript
univerAPI.setCrosshairHighlightEnabled(true)univerAPI.setCrosshairHighlightEnabled(false)

십자선 강조 표시 활성화 상태 가져오기

TypeScript
univerAPI.getCrosshairHighlightEnabled()

이벤트 리스너

전체 이벤트 타입 정의는 Events에서 확인할 수 있습니다.

십자선 강조 표시의 활성화 상태가 변경되면 CrosshairHighlightEnabledChanged 이벤트가 트리거됩니다.

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => {  const { enabled, workbook, worksheet } = params})// Remove the event listener using `disposable.dispose()`

십자선 강조 표시의 색상이 변경되면 CrosshairHighlightColorChanged 이벤트가 트리거됩니다.

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {  const { color, workbook, worksheet } = params})// Remove the event listener using `disposable.dispose()`

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.