UNPKG

vue-hiprint

Version:

vue3版本hiprint支持跨域批量打印

77 lines (56 loc) 2.69 kB
# 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/)