vue-hiprint
Version:
vue3版本hiprint支持跨域批量打印
77 lines (56 loc) • 2.69 kB
Markdown
# print-design
#### 介绍
Vue3.0 版本,基于 element-plus hiprint 打印设计器
#### 软件架构
软件架构说明
#### 安装教程
1. npm install vue-hiprint
<br>
<br>
import { hiprint, defaultElementTypeProvider, customData, customPrintJson } from "vue-hiprint"
#### 使用说明
1. 设计器:
import { PrintDesign } from "vue-hiprint"
<br>
import "vue-hiprint/dist/designer.style.css" //引入样式
<br>
```
// 可以自定义字段custFields 字段已字段需要出现后再去渲染组件
<PrintDesign ref="printRef" :tempJson="tempJson" :tempData="tempData" :custFields="custFields" v-if="custFields">
// 顶部插槽按钮
<template #customButton>
<el-button-group>
<el-button type="primary" @click="saveTemp">保存模板</el-button>
</el-button-group>
</template>
</PrintDesign>
```
#### 交流
QQ 群:780382507
### 效果图
<br>
<img src="https://gitee.com/owen_yang/vform-designer/raw/master/doc/demo.png" height="300" >
<br>
<br>
#### 参数
| 名称 | 说明 | 回调参数 |
| ---------- | --------------------- | ------------------------------------------------------------------ |
| custFields | 左侧自定义拖曳字段 | 必须数组 可查看官网具体参数 字段必须要的[{ tid: "defaultModule.longText",title: "长文",data: "155123456789",type: "longText"}] |
| tempJson | 设计器模板数据 json | 当前配置的 json |
| tempData | 模板对应的数据集 data | 当前配置的 data |
### 插槽
| 名称 | 说明 |
| ------------ | -------------------- |
| customButton | 顶部工具栏自定义按钮 |
#### 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request
#### 特技
1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)