bixi/packages/label/docs/component.zh-CN.md

企业级中后台前端解决方案

---
type: Guide
title:
  en-US: Component
  zh-CN: 标注组件
order: 12
---

这是标注引擎的 Angular 封装，同时支持文本和表格标注


### bixi-label-core

| 成员 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[engine]` | 标注引擎地址 | `string` | `./bixi-label/index.html` |
| `[hub]`    | 标注器控制器 | `LabelHub` | - |
| `[labelTooltipContent]` |  Tooltip 内容 | `TemplateRef` | - |
| `[labelTooltipDisabled]` | 是否禁用 Tooltip  | `boolean` | `false` |
| `[labelModalTitle]` | 标注框标题  | `string` | - |
| `[labelModalContent]` | 标注框内容  | `TemplateRef` | - |
| `[labelModalDisabled]` | 是否禁用标注框  | `boolean` | `false` |
| `(startLabeling)` | 开始标注事件  | `EventEmitter<ILabelingEvent>` | - |
| `(deleteLabels)`  | 删除标注事件  | `EventEmitter<IDeleteLabelsEvent>` | - |
| `(clickLabels)`   | 点击标注事件  | `EventEmitter<IClickLabelsEvent>` | - |
| `(pdfLoadFailed)`   | PDF 加载失败  | `EventEmitter` | - |
| `(mergeTables)`   | 合并跨页表格  | `EventEmitter` | - |
| `(splitTable)`   | 拆分跨页表格  | `EventEmitter` | - |


## Type
``` typescript
interface IClickMetadata {
  altKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  shiftKey: boolean;
  which: number;
}

export interface IClickOutsideEvent {
  position: {
    top: number;
    left: number;
  };
  metadata: IClickMetadata;
}

interface ILabelsEvent {
  data: ILabel[];
  position: {
    top: number;
    left: number;
    width: number;
    height: number;
  };
}

export type ILabelingEvent = ILabelsEvent;
export type IDeleteLabelsEvent = ILabelsEvent;
export type IHoverInLabelsEvent = ILabelsEvent;
export interface IClickLabelsEvent extends ILabelsEvent {
  metadata: IClickMetadata;
}
```

[使用参考](http://bixi-pro.datagrand.com/#/label/text)