# 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/)