🎉 v0.5.0 版本已发布。查看详情 →
指南Univer Sheets功能十字高亮

十字高亮

Facade API付费版本需要 Univer 服务端Univer on Node.jsPreset
✅--✅❌ 通过 plugin 引入

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

该功能包含以下插件包：

Presets 安装

npm install @univerjs/sheets-crosshair-highlight
import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
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 { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    zhCN: Tools.deepMerge(
      {},
      UniverPresetSheetsCoreZhCN,
      sheetsCrosshairHighlightZhCN 
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsCrosshairHighlightPlugin
  ],
});

高级安装

npm install @univerjs/sheets-crosshair-highlight
import { LocaleType, Tools } 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({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      SheetsCrosshairHighlightZhCN
    ),
  },
});
 
univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin);

Facade API

切换十字高亮开关

univerAPI.setCrosshairHighlightEnabled(true);
 
univerAPI.setCrosshairHighlightEnabled(false);

设置十字高亮颜色

univerAPI.setCrosshairHighlightColor('red');

参考链接

查找 & 替换禅编辑器