特性

• ⚡ 冲冲冲

Priview | 预览

Click Here | 点击这里预览

仅个人研究学习用，并不保证可用性和健壮性

本项目为本人在学习可视化的学习探索项目，是个DEMO。写的也还不成熟，希望可以多多提建议。主要参考了文末几位dalao的项目和文章，在此基础上进行编写代码。主要是为了锻炼自己的代码能力和设计能力。

截图

安装

npm install print-template-designer --save

main.js

import store from './store'
import PrintTemplateDesigner from 'print-template-designer'
import 'print-template-designer/lib/print-template-designer.css'
import "remixicon/fonts/remixicon.css";
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'

Vue.use(VXETable)

Vue.use(PrintTemplateDesigner, { store })
// 需要全局设置$VXETable、$XModal用于注册渲染器等逻辑。
Vue.prototype.$VXETable = VXETable
Vue.prototype.$XModal = VXETable.modal

app.vue

<template>
  <div>
    <ptd-designer
      ref="designer"
      :pre-component-data="preComponentData"
      :pre-page-config="prePageConfig"
      :pre-data-source="preDataSource"
      :pre-data-set="preDataSet"
      :config="printTemplateConfig"
    />
    <ptd-viewer
      v-if="viewerVisible"
      :visible.sync="viewerVisible"
      :component-data="componentData"
      :page-config="pageConfig"
      :data-set="preDataSet"
      :data-source="dataSource"
      :need-toast="needToast"
      :direct-export="directExport"
      :file-name="fileName"
    />
  </div>
</template>

<script>
  export default {
    name: 'APP',
    // ......
  }
</script>

插槽

1. roy-designer-header-slot

标题栏右侧按钮区域插槽

2. roy-designer-toolbar-slot

设计器上方工具栏插槽

必要外部依赖库

需要安装以下依赖才可使用:

• vue
• vuex
• remixicon
• vxe-table@legacy
• shepherd.js
• xe-utils

API

PTD-Designer Props

| 名称 | 类型 | 默认值 | 说明 | |------------------|---------------------|---------|-----------------------------------------------------------------------| | preComponentData | array \| boolean | false | 预设页面组件 | | prePageConfig | object \| boolean | false | 预设页面全局配置 | | preDataSource | array \| boolean | false | 预设数据源 | | preDataSet | object \| boolean | false | 预设数据集 | | config | object | {} | 设计器配置，toolbarConfig: { buttons: 展示哪些按钮， showNightMode: 是否显示夜间模式切换按钮 } |

PTD-Viwer Props

| 名称 | 类型 | 默认值 | 说明 | |---------------|---------------------|---------------------|--------------------------------------| | visible | boolean | true | 展示预览窗口 | | componentData | array | [] | 设计器中的组件数据 | | pageConfig | object | {} | 设计器中模板全局配置信息 | | dataSource | array | [] | 模板数据源配置信息 | | dataSet | object | {} | 数据集合，动态数据信息 | | fileName | string | '' | 导出PDF文件名，如果为空则为模板名 | | directExport | boolean | false | 打开窗口后直接进行渲染下载为PDF | | needToast | string \| boolean | '建议导出PDF后再打印，更精准' | 导出PDF后页面提示信息，为false时不提示。否则提示传入的字符串内容 |

联系我

参考项目与文章

• report-designer
• printer-editor
• visual-drag-demo
• vue-email-editor
• slatejs 编辑器表格---选区
• slatejs 编辑器表格---合并单元格
• slatejs 编辑器表格---拆分单元格
• slatejs 编辑器表格---插入行

TODO

以下是待办列表，写一些接下来该项目要干的事：

• [x] 基本功能

• [x] 剔除ElementUI

• [ ] BUG修复

• [ ] 扩展功能（快捷键、撤销恢复等）

• [ ] 调整部分组件的渲染逻辑

• [ ] 重构 （同时支持Vue2和Vue3）

Statics