docs:add page header
This commit is contained in:
@@ -20,7 +20,7 @@ const {
|
|||||||
margins: IMargin;
|
margins: IMargin;
|
||||||
header?: IHeader;
|
header?: IHeader;
|
||||||
watermark?: IWatermark;
|
watermark?: IWatermark;
|
||||||
data: IElement[];
|
data: IEditorData;
|
||||||
} = instance.command.getValue()
|
} = instance.command.getValue()
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
```javascript
|
```javascript
|
||||||
import Editor from "@hufe921/canvas-editor"
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
|
||||||
new Editor(container, [], {
|
new Editor(container, IEditorData | IElement[], {
|
||||||
// 配置项
|
// 配置项
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -49,6 +49,7 @@ interface IEditorOption {
|
|||||||
headerTop?: number; // 页眉距离上边距。默认:50
|
headerTop?: number; // 页眉距离上边距。默认:50
|
||||||
header?: IHeader; // 页眉信息。{data:string; color?:string; size?:number; font?:string;}
|
header?: IHeader; // 页眉信息。{data:string; color?:string; size?:number; font?:string;}
|
||||||
paperDirection?: PaperDirection; // 纸张方向:纵向、横向
|
paperDirection?: PaperDirection; // 纸张方向:纵向、横向
|
||||||
|
inactiveAlpha?: number; // 正文内容失焦时透明度。默认值:0.6
|
||||||
watermark?: IWatermark; // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
|
watermark?: IWatermark; // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
|
||||||
control?: IControlOption; // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}
|
control?: IControlOption; // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string;}
|
||||||
checkbox?: ICheckboxOption; // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; fontStyle?: string;}
|
checkbox?: ICheckboxOption; // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; fontStyle?: string;}
|
||||||
|
|||||||
+17
-1
@@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
## 待开发
|
## 待开发
|
||||||
|
|
||||||
- 可编辑页眉
|
- 可编辑页眉(待边界修复)
|
||||||
- 计算性能
|
- 计算性能
|
||||||
- 控件规则
|
- 控件规则
|
||||||
- 表格分页
|
- 表格分页
|
||||||
@@ -44,6 +44,7 @@ npm i @hufe921/canvas-editor --save
|
|||||||
|
|
||||||
## Step. 3: 实例化编辑器
|
## Step. 3: 实例化编辑器
|
||||||
|
|
||||||
|
- 仅包含正文内容
|
||||||
```javascript
|
```javascript
|
||||||
import Editor from "@hufe921/canvas-editor"
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
|
||||||
@@ -54,6 +55,21 @@ new Editor(document.querySelector(".canvas-editor"), [
|
|||||||
], {})
|
], {})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
- 包含正文及页眉内容
|
||||||
|
```javascript
|
||||||
|
import Editor from "@hufe921/canvas-editor"
|
||||||
|
|
||||||
|
new Editor(document.querySelector(".canvas-editor"), {
|
||||||
|
header: [{
|
||||||
|
value: "Header",
|
||||||
|
rowFlex: RowFlex.CENTER
|
||||||
|
}],
|
||||||
|
main: [{
|
||||||
|
value: "Hello World"
|
||||||
|
}]
|
||||||
|
}, {})
|
||||||
|
```
|
||||||
|
|
||||||
## Step. 4: 配置编辑器
|
## Step. 4: 配置编辑器
|
||||||
|
|
||||||
详见下一节
|
详见下一节
|
||||||
Reference in New Issue
Block a user