十字高亮
| Facade API | 可付费升级 | 需要 Univer 服务端 | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | - | - | - | ❌ 通过 plugin 引入 |
十字高亮将用户选中的单元格所在行列突出显示，以便用户更容易地识别当前选中的单元格。
该功能包含以下插件包：
Presets 安装
npm install @univerjs/sheets-crosshair-highlightimport { createUniver, defaultTheme, LocaleType, merge } 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: {
[LocaleType.ZH_CN]: merge(
{},
UniverPresetSheetsCoreZhCN,
SheetsCrosshairHighlightZhCN
),
},
theme: defaultTheme,
presets: [
UniverSheetsCorePreset(),
],
plugins: [
UniverSheetsCrosshairHighlightPlugin
],
});手动组合安装
npm install @univerjs/sheets-crosshair-highlightimport { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
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]: merge(
SheetsCrosshairHighlightZhCN
),
},
});
univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin);Facade API
完整 facade api 类型定义，请查看 FacadeAPI
切换十字高亮开关
univerAPI.setCrosshairHighlightEnabled(true);
univerAPI.setCrosshairHighlightEnabled(false);获取十字高亮开关状态
console.log(univerAPI.getCrosshairHighlightEnabled());设置十字高亮颜色
univerAPI.setCrosshairHighlightColor('red');获取十字高亮颜色
console.log(univerAPI.getCrosshairHighlightColor());事件监听
完整事件类型定义，请查看 Events 。
CrosshairHighlightEnabledChanged 事件将在十字高亮开关状态发生变化时触发。
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => {
const { enabled, workbook, worksheet } = params;
console.log(params);
});
// 移除事件监听器，使用 `disposable.dispose()`CrosshairHighlightColorChanged 事件将在十字高亮颜色发生变化时触发。
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {
const { color, workbook, worksheet } = params;
console.log(params);
});
// 移除事件监听器，使用 `disposable.dispose()`Last updated on