Web SDK

十字高亮

插件信息

十字高亮将用户选中的单元格所在行列突出显示，以便用户更容易地识别当前选中的单元格。

预览

预设模式

十字高亮并未提供预设模式，但支持与其插件混用。

Shell
pnpm add @univerjs/sheets-crosshair-highlight

使用

TypeScript
import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'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.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      UniverPresetSheetsCoreZhCN,      SheetsCrosshairHighlightZhCN,     ),  },  presets: [    UniverSheetsCorePreset(),  ],  plugins: [    UniverSheetsCrosshairHighlightPlugin,   ],})

插件模式

安装

Shell
pnpm add @univerjs/sheets-crosshair-highlight

使用

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'import SheetsCrosshairHighlightZhCN from '@univerjs/sheets-crosshair-highlight/locale/zh-CN'import '@univerjs/sheets-crosshair-highlight/lib/index.css'import '@univerjs/sheets-crosshair-highlight/facade'const univer = new Univer({  locale: LocaleType.ZH_CN,  locales: {    [LocaleType.ZH_CN]: mergeLocales(      SheetsCrosshairHighlightZhCN,     ),  },})univer.registerPlugin(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})// 移除事件监听器，使用 `disposable.dispose()`

CrosshairHighlightColorChanged 事件将在十字高亮颜色发生变化时触发。

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {  const { color, workbook, worksheet } = params})// 移除事件监听器，使用 `disposable.dispose()`

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.