m7_print_designer

Appearance

下载安装 ​

环境要求 ​

  • Node.js ≥ 18
  • Vue ≥ 3.3（Vue 3 Composition API）
  • 现代浏览器：Chrome / Edge / Safari（打印依赖 iframe + @page）

npm 安装 ​

bash
npm install m7_print_designer

组件库同时输出 ES Module、UMD 和 TypeScript 声明文件：

json
{
  "main": "./dist/m7_print_designer.umd.cjs",
  "module": "./dist/m7_print_designer.js",
  "types": "./dist/index.d.ts"
}

引入 CSS 变量 ​

组件依赖一组 CSS 变量（主题色、边框色等），在使用前于全局 :root 声明：

css
:root {
  --pd-bg: #f0f2f5;
  --pd-panel-bg: #ffffff;
  --pd-border: #dcdfe6;
  --pd-text: #303133;
  --pd-text-secondary: #606266;
  --pd-muted: #909399;
  --pd-primary: #2f6bff;
  --pd-danger: #f56c6c;
}

直接复制到你的全局样式即可；如需自定义主题，改 --pd-primary 等值即可整体换肤。

引入组件 ​

ts
import { PrintDesigner, PrintPreview } from 'm7_print_designer'

源码引入（二开场景） ​

代码仓库：https://gitee.com/jiangzeyu/m7_print_designer.git

bash
git clone https://gitee.com/jiangzeyu/m7_print_designer.git

如需基于源码二次开发，直接克隆仓库后引入 src/designer：

ts
import { PrintDesigner } from './src/designer'

开发与构建脚本：

bash
npm install
npm run dev         # 演示页（Vite）
npm run build:lib   # 构建组件库（ES + UMD + d.ts）
npm run build       # 构建演示页

目录结构 ​

m7_print_designer/
├── src/designer/       # 组件库源码
│   ├── PrintDesigner.vue   # 设计器页
│   ├── PrintPreview.vue    # 预览页
│   ├── components/         # 画布 / 面板 / 表格编辑器
│   ├── composables/        # 状态 / 历史 / 资源
│   └── *.ts                # 类型 / 渲染 / 打印 / 公章等
├── src/demo/           # 演示页（模板 + 数据）
├── dist/               # 组件库产物
└── site/               # 本官网（VitePress）