vue-hiprint

print-design

介绍

Vue3.0 版本,基于 element-plus hiprint 打印设计器

软件架构

软件架构说明

安装教程

1. npm install vue-hiprint
   
   import { hiprint, defaultElementTypeProvider, customData, customPrintJson } from "vue-hiprint"

使用说明

1. 设计器： import { PrintDesign } from "vue-hiprint"
   import "vue-hiprint/dist/designer.style.css" //引入样式
   

   // 可以自定义字段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

效果图

参数

名称	说明	回调参数
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
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/