operp-print-designer 1.0.9 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/components/QRCode.d.ts +9 -0
- package/dist/constants/index.d.ts +7 -0
- package/dist/operp-print-designer.css +1 -1
- package/dist/operp-print-designer.es.js +3375 -3190
- package/dist/operp-print-designer.umd.js +21 -21
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
# Print Designer 使用文档
|
|
1
|
+
# Operp Print Designer 使用文档
|
|
2
|
+
|
|
3
|
+
**Git 仓库地址**: https://gitee.com/garychk/operp-react-print
|
|
2
4
|
|
|
3
5
|
## 安装
|
|
4
6
|
|
|
@@ -87,7 +89,7 @@ interface DataSource {
|
|
|
87
89
|
### CanvasComponent
|
|
88
90
|
|
|
89
91
|
```typescript
|
|
90
|
-
type CanvasComponentType = 'text' | 'image' | 'table' | 'barcode' | 'line';
|
|
92
|
+
type CanvasComponentType = 'text' | 'image' | 'table' | 'barcode' | 'qrcode' | 'line';
|
|
91
93
|
|
|
92
94
|
interface CanvasComponent {
|
|
93
95
|
id: string;
|
|
@@ -274,7 +276,7 @@ import 'operp-print-designer/dist/index.css';
|
|
|
274
276
|
2. **TypeScript**: 该库使用 TypeScript 编写，自带类型定义。
|
|
275
277
|
|
|
276
278
|
3. **数据绑定**: 数据源支持对象和数组两种类型：
|
|
277
|
-
- **对象类型**:
|
|
279
|
+
- **对象类型**: 适用于文本、图片、条码、二维码等组件的数据绑定
|
|
278
280
|
- **数组类型**: 适用于表格组件的数据绑定
|
|
279
281
|
|
|
280
282
|
4. **预览模式**: 当 `isPreview` 为 `true` 时，组件处于只读模式，用户不能编辑模板，只能预览和打印。
|
|
@@ -58,6 +58,13 @@ export declare const COMPONENT_DEFAULTS: {
|
|
|
58
58
|
format: "CODE128";
|
|
59
59
|
content: string;
|
|
60
60
|
};
|
|
61
|
+
qrcode: {
|
|
62
|
+
value: string;
|
|
63
|
+
errorLevel: "M";
|
|
64
|
+
color: string;
|
|
65
|
+
backgroundColor: string;
|
|
66
|
+
content: string;
|
|
67
|
+
};
|
|
61
68
|
line: {
|
|
62
69
|
color: string;
|
|
63
70
|
thickness: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.app-left-panel{width:
|
|
1
|
+
*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.app-left-panel{position:relative;width:240px;min-width:220px;display:flex;flex-direction:column;border-right:1px solid #e8e8e8;background:#fff;overflow:hidden;transition:width .2s ease,min-width .2s ease}.app-left-top{flex-shrink:0}.app-left-bottom{flex:1;overflow:auto}.app-right-panel{position:relative;width:260px;min-width:260px;display:flex;flex-direction:column;border-left:1px solid #e8e8e8;background:#fff;overflow:auto;transition:width .2s ease,min-width .2s ease}.app-left-panel.collapsed,.app-right-panel.collapsed{width:40px;min-width:40px;align-items:center;justify-content:flex-start;overflow:hidden}.panel-collapse-trigger{position:absolute;top:8px;z-index:2;width:24px;height:24px;padding:0}.panel-collapse-trigger-left,.panel-collapse-trigger-right{right:8px}.panel-collapsed-trigger{width:32px;height:32px;margin-top:8px;padding:0}.canvas-grid{background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px}.react-grid-item.react-grid-placeholder{background:#1677ff!important;opacity:.15!important;border-radius:4px}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}
|