Univer
Univer Sheet
功能
核心功能

核心功能

📊 Univer Sheet📝 Univer Doc

核心功能是实现电子表格的基础功能,包含了 Univer Sheet 的核心功能,如创建工作簿、单元格编辑、单元格选择、公式等。

安装

pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui

引入

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";
 
import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
 
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
 
import { UniverUIPlugin } from "@univerjs/ui";
 
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
 
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";

国际化

import { LocaleType, Tools } from '@univerjs/core';
import DesignZhCN from '@univerjs/design/locale/zh-CN';
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN';
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN';
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN';
import SheetsFormulaZhCN from '@univerjs/sheets-formula/locale/zh-CN';
import UIZhCN from '@univerjs/ui/locale/zh-CN';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      DesignZhCN,
      DocsUIZhCN,
      SheetsZhCN,
      SheetsUIZhCN,
      SheetsFormulaZhCN,
      UIZhCN
    ),
  },
});

注册

univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
 
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
});
 
univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);
 
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
 
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

配置

@univerjs/core

@univerjs/core 在初始化时提供了一些配置项,可用于配置主题、国际化等。

new Univer({
  theme: IStyleSheet;
  locale: LocaleType;
  locales: ILocales;
  logLevel?: LogLevel;
});

完整的配置项参考 IUniverData

@univerjs/ui

@univerjs/ui 提供了一些配置项,可用于基础布局的配置。

univer.registerPlugin(UniverUIPlugin, {
  container?: string | HTMLElement;
 
  header?: boolean;
  footer?: boolean;
  contextMenu?: boolean;
});
  • container - 容器元素,可以是字符串或者 DOM 元素。
  • header - 是否显示头部。
  • toolbar - 是否显示头部工具栏。 0.2.0+
  • footer - 是否显示底部。
  • contextMenu - 是否显示右键菜单。

Copyright © 2021-2024 DreamNum Co,Ltd. All Rights Reserved.