ei-print-editor

安装

npm install ei-print-editor -S

使用

import Vue from 'vue'
import EiPrintEditor from 'ei-print-editor'
import 'ei-print-editor/lib/ei-print-editor.css'
Vue.use(EiPrintEditor)

注意

1. 此插件依赖于**element-ui和vuex**

element-ui以下组件必须全局注册

el-dialog、el-drawer、el-form、el-form-item、el-input、el-input-number、el-select、el-button、el-tag、el-switch

组件

| 名称 | 描述 | |-----------------|----------------| | ei-print-layout | 编辑器整体布局 | | ei-print-render | 数据渲染 | | ei-print-out | 打印 |

ei-print-layout

属性

| 参数 | 说明 | 类型 | 默认值 | |---------------|------------------|---------|:------:| | value/v-model | 绑定值 | Object | - | | generalFields | 普通标签字段 | Array | - | | tableFields | 表格字段 | Array | - | | QRFields | 二维码字段 | Array | - | | showClose | 是否显示后退按钮 | Boolean | false |

事件

| 事件名称 | 描述 | 参数 | |:--------:|--------------------------------------------|--------------------------| | save | 点击 保存按钮 编辑触发 | 编辑的数据（canvasData） | | close | showClose 为 true 时点击 后退按钮 触发 | - |

ei-print-render

属性

| 配置项 | 属性 | 描述 | 类型 | 默认值 | |------------|-------------|----------------|:------:|:------:| | canvasData | | 模板数据 | Object | - | | renderData | | 需要渲染的数据 | Object | - | | | tableData | 表格数据 | Array | - | | | generalData | 其它普通数据 | Object | - |

ei-print-out

属性

| 配置项 | 属性 | 描述 | 类型 | 默认值 | |------------|-------------|----------------|:------:|:------:| | canvasData | | 模板数据 | Object | - | | renderData | | 需要渲染的数据 | Object | - | | | tableData | 表格数据 | Array | - | | | generalData | 其它普通数据 | Object | - | | QROptions | | 二维码数据 | Object | - | | | billType | 单据类型 | Number | - | | | url | 二维码地址 URL | String | - |

方法

| 事件名称 | 描述 | |:--------:|--------------| | print | 用于打印模板 |