Print Template Designer

screenshot of Print Template Designer

Print Template Designer

A vue2 component for design a page for print / 一个使用Vue2的组件,用于设计打印页面模板[ 可视化 拖拽 设计器 打印 ]。


This is a project for personal research and learning purposes, focusing on visualization. It is a demo project that is not guaranteed to be usable or robust. The author hopes to receive feedback and suggestions to improve the project. The project is based on the references to several projects and articles by experienced developers. The purpose of the project is to enhance coding and design skills.


  • Main.js: The main JavaScript file of the project.
  • App.vue: The main Vue component of the project.
  • 插槽roy-designer-header-slot: A slot for the header area of the designer.
  • 插槽roy-designer-toolbar-slot: A slot for the toolbar area of the designer.
  • 外部依赖库需要安装以下依赖才可使用 (External dependency libraries need to be installed):
    • Vue
    • Vuex
    • Remixicon
    • vxe-table@legacy
    • shepherd.js
    • xe-utils


To install and use the theme, follow these steps:

  1. Install the required dependencies:
npm install vue vuex remixicon vxe-table@legacy shepherd.js xe-utils
  1. Import and use the necessary components and files in your project:
import Main from 'path/to/main.js';
import App from 'path/to/app.vue';

Vue.component('roy-designer-header-slot', HeaderSlotComponent);
Vue.component('roy-designer-toolbar-slot', ToolbarSlotComponent);
  1. Configure the designer by passing the necessary props:
import Designer from 'path/to/designer.js';

const designer = new Designer({
  toolbarConfig: {
    buttons: ['button1', 'button2'],
    showNightMode: false,
  1. Use the designed components in your Vue templates:


The project is a demo for studying and exploring visualization. It may not be fully functional or robust. The code is still under development and the author welcomes feedback and suggestions. The main features include different components, external dependencies, and configuration options. The installation guide provides steps to set up the project and utilize its components.


Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.


ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.