ei-print-editor

vue 打印组件编辑器

Usage no npm install needed!

<script type="module">
  import eiPrintEditor from 'https://cdn.skypack.dev/ei-print-editor';
</script>

README

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)

注意

此插件依赖于**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	用于打印模板