├── docs ├── .vuepress │ ├── styles │ │ ├── index.scss │ │ └── palette.scss │ ├── public │ │ ├── robots.txt │ │ ├── logo.png │ │ ├── favicon.ico │ │ ├── assets │ │ │ ├── wechat.png │ │ │ ├── zAlipay.png │ │ │ ├── zWechat.png │ │ │ ├── sv-print.png │ │ │ ├── vue-plugin-hiprint.png │ │ │ └── hiprint.ElementTypes.png │ │ └── logo.svg │ ├── navbar │ │ ├── index.ts │ │ ├── en.ts │ │ └── zh.ts │ ├── sidebar │ │ ├── index.ts │ │ ├── en.ts │ │ └── zh.ts │ ├── config.ts │ └── theme.ts ├── guide │ ├── encrypt.md │ ├── disable.md │ ├── intro.md │ ├── page.md │ ├── README.md │ ├── markdown.md │ └── overview.md ├── en │ ├── guide │ │ ├── encrypt.md │ │ ├── disable.md │ │ ├── page.md │ │ ├── README.md │ │ └── markdown.md │ ├── README.md │ └── slides.md ├── config │ ├── oval.md │ ├── rect.md │ ├── hLine.md │ ├── vLine.md │ ├── html.md │ ├── longText.md │ ├── provider.md │ ├── image.md │ ├── start.md │ ├── panel.md │ ├── hiprint.md │ ├── text.md │ ├── table.md │ └── template.md ├── sv-print │ ├── start.md │ ├── provider.md │ └── options.md ├── plugin │ └── intro.md ├── README.md └── slides.md ├── .gitignore ├── README.md ├── package.json └── .github └── workflows └── deploy-docs.yml /docs/.vuepress/styles/index.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | 3 | Allow: / -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.scss: -------------------------------------------------------------------------------- 1 | $theme-color: #2f0882; 2 | -------------------------------------------------------------------------------- /docs/.vuepress/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./en.js"; 2 | export * from "./zh.js"; 3 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./en.js"; 2 | export * from "./zh.js"; 3 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/logo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | docs/.vuepress/.cache 5 | docs/.vuepress/.temp 6 | config.json 7 | .env 8 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/assets/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/assets/wechat.png -------------------------------------------------------------------------------- /docs/.vuepress/public/assets/zAlipay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/assets/zAlipay.png -------------------------------------------------------------------------------- /docs/.vuepress/public/assets/zWechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/assets/zWechat.png -------------------------------------------------------------------------------- /docs/.vuepress/public/assets/sv-print.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/assets/sv-print.png -------------------------------------------------------------------------------- /docs/.vuepress/public/assets/vue-plugin-hiprint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/assets/vue-plugin-hiprint.png -------------------------------------------------------------------------------- /docs/.vuepress/public/assets/hiprint.ElementTypes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CcSimple/sv-print-docs/HEAD/docs/.vuepress/public/assets/hiprint.ElementTypes.png -------------------------------------------------------------------------------- /docs/.vuepress/navbar/en.ts: -------------------------------------------------------------------------------- 1 | import { navbar } from "vuepress-theme-hope"; 2 | 3 | export const en = navbar([ 4 | { text: "Guide", icon: "creative", link: "/en/guide/" }, 5 | ]); 6 | -------------------------------------------------------------------------------- /docs/guide/encrypt.md: -------------------------------------------------------------------------------- 1 | --- 2 | icon: lock 3 | category: 4 | - 使用指南 5 | tag: 6 | - 文章加密 7 | --- 8 | 9 | # 密码加密的文章 10 | 11 | 实际的文章内容。 12 | 13 | 段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字。 14 | 15 | 段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字。 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sv-print 文档源码 2 | 3 | sv-print 是一个使用 Svelte 构建的打印设计器组件([基于 hiprint](http://hiprint.io))。它也可以用于其他 UI 库/框架,如 React、Vue 和 Angular。 4 | 5 | 本仓库将编写 sv-print 使用文档,以及 hiprint 使用文档 6 | 7 | > 感兴趣的小伙伴可以 fork 后编写贡献文档啦~ 8 | 9 | [gitee 国内镜像文档](https://ccsimple.gitee.io/sv-print-docs) 10 | 11 | [github 文档](https://ccsimple.github.io/sv-print-docs/) 12 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebar/en.ts: -------------------------------------------------------------------------------- 1 | import { sidebar } from "vuepress-theme-hope"; 2 | 3 | export const en = sidebar({ 4 | "/en": [ 5 | { 6 | icon: "creative", 7 | text: "Guide", 8 | prefix: "guide/", 9 | children: ["install"], 10 | }, 11 | { 12 | text: "markdown", 13 | icon: "creative", 14 | prefix: "guide/", 15 | link: "guide/markdown", 16 | // children: "structure", 17 | }, 18 | "slides", 19 | ], 20 | }); 21 | -------------------------------------------------------------------------------- /docs/guide/disable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 布局与功能禁用 3 | icon: config 4 | order: 3 5 | category: 6 | - 使用指南 7 | tag: 8 | - 禁用 9 | 10 | navbar: false 11 | sidebar: false 12 | 13 | breadcrumb: false 14 | pageInfo: false 15 | contributors: false 16 | editLink: false 17 | lastUpdated: false 18 | prev: false 19 | next: false 20 | comment: false 21 | footer: false 22 | 23 | backtotop: false 24 | --- 25 | 26 | 你可以通过设置页面的 Frontmatter,在页面禁用功能与布局。 27 | 28 | 29 | 30 | 本页面就是一个示例,禁用了如下功能: 31 | 32 | - 导航栏 33 | - 侧边栏 34 | - 路径导航 35 | - 页面信息 36 | - 贡献者 37 | - 编辑此页链接 38 | - 更新时间 39 | - 上一篇/下一篇 链接 40 | - 评论 41 | - 页脚 42 | - 返回顶部按钮 43 | -------------------------------------------------------------------------------- /docs/en/guide/encrypt.md: -------------------------------------------------------------------------------- 1 | --- 2 | icon: lock 3 | category: 4 | - Guide 5 | tag: 6 | - encryption 7 | --- 8 | 9 | # Encryption Article 10 | 11 | The actual article content. 12 | 13 | Paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text paragraph 1 text. 14 | 15 | Paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text paragraph 2 text. 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sv-print-docs", 3 | "version": "0.1.0", 4 | "description": "sv-print及hiprint文档", 5 | "license": "MIT", 6 | "type": "module", 7 | "scripts": { 8 | "docs:build": "vuepress build docs", 9 | "docs:clean-dev": "vuepress dev docs --clean-cache", 10 | "docs:dev": "vuepress dev docs" 11 | }, 12 | "devDependencies": { 13 | "@vuepress/client": "2.0.0-beta.59", 14 | "@vuepress/plugin-docsearch": "2.0.0-beta.59", 15 | "vue": "^3.2.45", 16 | "vuepress": "2.0.0-beta.59", 17 | "vuepress-plugin-sitemap2": "2.0.0-beta.99", 18 | "vuepress-theme-hope": "2.0.0-beta.145" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /docs/guide/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | category: 4 | - 使用指南 5 | --- 6 | 7 | ### 介绍 8 | 9 | sv-print 是一个使用 Svelte 构建的打印设计器组件([基于 hiprint](http://hiprint.io))。它也可以用于其他 UI 库/框架,如 React、Vue 和 Angular。 10 | 11 | 因为我开源的[vue-plugin-hiprint](https://gitee.com/CcSimple/vue-plugin-hiprint)插件,当时仅仅是为了方便我自己在 vue 项目中引入使用,而且最开始不熟悉,所以它只是个 js 插件库。随着后续使用者的增多,发现大家有类似的需求,于是我就想着把它封装成组件,方便大家使用。于是就有了这个组件库。 12 | 13 | sv-print 就是为了方便在项目中快速集成 web 打印功能的一个组件。 14 | 15 | ### 特性 16 | 17 | - 🚀 支持 vue、react、angular 等框架的组件引入 18 | - 🚀 支持 常规编辑: 复制、粘贴、删除、缩放、拖拽、旋转、对齐、吸附、锁定、解锁、撤销、重做、全选等 19 | - ⭐️ 支持 插件机制 可扩展更多的打印元素(ECharts、Fabric等等) 20 | - 🌈 支持拖拽设计、预览、打印、导出PDF、导出图片 21 | - ✨ 支持自定义模板、导入/导出模板 22 | - 🌈 支持数据源绑定、数据格式化、样式格式化 -------------------------------------------------------------------------------- /docs/.vuepress/navbar/zh.ts: -------------------------------------------------------------------------------- 1 | import { navbar } from "vuepress-theme-hope"; 2 | 3 | export const zh = navbar([ 4 | { text: "首页", icon: "home", link: "/" }, 5 | { text: "介绍", icon: "blog", link: "/guide/intro" }, 6 | { text: "快速上手", icon: "edit", link: "/guide/" }, 7 | { text: "sv-print组件使用", icon: "type", link: "/sv-print/start" }, 8 | { text: "hiprint使用", icon: "blog", link: "/config/start" }, 9 | { text: "插件", icon: "config", link: "/plugin/intro" }, 10 | { text: "在线案例", icon: "launch", link: "https://ccsimple.github.io/sv-print-demo/" }, 11 | // { 12 | // text: "Theme Docs", 13 | // icon: "note", 14 | // link: "https://vuepress-theme-hope.github.io/v2/", 15 | // }, 16 | ]); 17 | -------------------------------------------------------------------------------- /docs/en/guide/disable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Disabling layout and features 3 | icon: config 4 | order: 3 5 | category: 6 | - Guide 7 | tag: 8 | - disable 9 | 10 | navbar: false 11 | sidebar: false 12 | 13 | breadcrumb: false 14 | pageInfo: false 15 | contributors: false 16 | editLink: false 17 | lastUpdated: false 18 | prev: false 19 | next: false 20 | comment: false 21 | footer: false 22 | 23 | backtotop: false 24 | --- 25 | 26 | You can disable some function and layout on the page by setting the Frontmatter of the page. 27 | 28 | 29 | 30 | This page is an demo that disables the following features: 31 | 32 | - Navbar 33 | - Sidebar 34 | - Breadcrumb 35 | - Page information 36 | - Contributors 37 | - Edit link 38 | - Update time 39 | - Prev/Next link 40 | - Comment 41 | - Footer 42 | - Back to top button 43 | -------------------------------------------------------------------------------- /docs/config/oval.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 椭圆 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | ---------- | ---------- | ------------------------------------------------------------- | ----------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 19 | 20 | ### options 21 | 22 | ::: info 温馨提示 23 | 24 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 25 | 26 | ::: 27 | 28 | | 名称 | 类型 | 说明 | 备注 | 29 | | ---- | ---- | ---- | ---- | -------------------------------------------------------------------------------- /docs/config/rect.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 矩形 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | ---------- | ---------- | ------------------------------------------------------------- | ----------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 19 | 20 | ### options 21 | 22 | ::: info 温馨提示 23 | 24 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 25 | 26 | ::: 27 | 28 | | 名称 | 类型 | 说明 | 备注 | 29 | | ---- | ---- | ---- | ---- | -------------------------------------------------------------------------------- /docs/config/hLine.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 横线 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | ---------- | ---------- | ------------------------------------------------------------- | ----------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 19 | 20 | ### options 21 | 22 | ::: info 温馨提示 23 | 24 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 25 | 26 | ::: 27 | 28 | | 名称 | 类型 | 说明 | 备注 | 29 | | ---- | ---- | ---- | ---- | 30 | -------------------------------------------------------------------------------- /docs/config/vLine.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 竖线 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | ---------- | ---------- | ------------------------------------------------------------- | ----------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 19 | 20 | ### options 21 | 22 | ::: info 温馨提示 23 | 24 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 25 | 26 | ::: 27 | 28 | | 名称 | 类型 | 说明 | 备注 | 29 | | ---- | ---- | ---- | ---- | 30 | -------------------------------------------------------------------------------- /docs/config/html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: html 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | ---------- | ---------- | ------------------------------------------------------------- | ----------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | formatter | `function` | 格式化函数
`同 options 的 formatter` | `优先级高于 options`
==无法彻底删除== | 19 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 20 | 21 | ### options 22 | 23 | ::: info 温馨提示 24 | 25 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 26 | 27 | ::: 28 | 29 | | 名称 | 类型 | 说明 | 备注 | 30 | | ---- | ---- | ---- | ---- | 31 | -------------------------------------------------------------------------------- /docs/config/longText.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 长文 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | ---------- | ---------- | ------------------------------------------------------------- | ----------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | title | `string` | 标题
`同 options 的 title` | `拖拽时就显示`
==无法彻底删除== | 19 | | field | `string` | 字段名称
`同 options 的 field` | `优先级高于 options`
==无法彻底删除== | 20 | | data | `string` | 同==测试数据==
`同 options 的 testData` ==需要先设置 field== | `优先级高于 options`
==无法彻底删除== | 21 | | formatter | `function` | 格式化函数
`同 options 的 formatter` | `优先级高于 options`
==无法彻底删除== | 22 | | styler | `function` | 样式函数
`同 options 的 styler` | `优先级高于 options`
==无法彻底删除== | 23 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 24 | 25 | ### options 26 | 27 | ::: info 温馨提示 28 | 29 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 30 | 31 | ::: 32 | 33 | | 名称 | 类型 | 说明 | 备注 | 34 | | ---- | ---- | ---- | ---- | 35 | -------------------------------------------------------------------------------- /docs/guide/page.md: -------------------------------------------------------------------------------- 1 | --- 2 | # 这是文章的标题 3 | title: 页面配置 4 | # 这是页面的图标 5 | icon: page 6 | # 这是侧边栏的顺序 7 | order: 1 8 | # 设置作者 9 | author: Ms.Hope 10 | # 设置写作时间 11 | date: 2020-01-01 12 | # 一个页面可以有多个分类 13 | category: 14 | - 使用指南 15 | # 一个页面可以有多个标签 16 | tag: 17 | - 页面配置 18 | - 使用指南 19 | # 此页面会在文章列表置顶 20 | sticky: false 21 | # 此页面会出现在文章收藏中 22 | star: true 23 | # 你可以自定义页脚 24 | footer: 这是测试显示的页脚 25 | # 你可以自定义版权信息 26 | copyright: 无版权 27 | --- 28 | 29 | `more` 注释之前的内容被视为文章摘要。 30 | 31 | 32 | 33 | ## 页面信息 34 | 35 | 你可以在 Markdown 的 Frontmatter 中设置页面信息。 36 | 37 | - 作者设置为 Ms.Hope。 38 | - 写作日期为 2020 年 1 月 1 日 39 | - 分类为 “使用指南” 40 | - 标签为 “页面配置” 和 “使用指南” 41 | 42 | ## 页面内容 43 | 44 | 你可以自由在这里书写你的 Markdown。 45 | 46 | ::: tip 47 | 48 | - 你可以将图片和 Markdown 文件放置在一起,但是你需要使用**相对链接**`./` 进行引用。 49 | 50 | - 对于 `.vuepress/public` 文件夹的图片,请使用绝对链接 `/` 进行引用。 51 | 52 | ::: 53 | 54 | 主题包含了一个自定义徽章章可以使用: 55 | 56 | > 文字结尾应该有深蓝色的 徽章文字 徽章。 57 | 58 | ## 页面结构 59 | 60 | 此页面应当包含: 61 | 62 | - [路径导航](https://vuepress-theme-hope.github.io/v2/zh/guide/layout/breadcrumb.html) 63 | - [标题和页面信息](https://vuepress-theme-hope.github.io/v2/zh/guide/feature/page-info.html) 64 | - [TOC (文章标题列表)](https://vuepress-theme-hope.github.io/v2/zh/guide/layout/page.html#标题列表) 65 | - [贡献者、更新时间等页面元信息](https://vuepress-theme-hope.github.io/v2/guide/feature/meta.html) 66 | - [评论](https://vuepress-theme-hope.github.io/v2/zh/guide/feature/comment.html) 67 | - [导航栏](https://vuepress-theme-hope.github.io/v2/zh/guide/layout/navbar.html) 68 | - [侧边栏](https://vuepress-theme-hope.github.io/v2/zh/guide/layout/sidebar.html) 69 | - [页脚](https://vuepress-theme-hope.github.io/v2/zh/guide/layout/footer.html) 70 | - 返回顶部按钮 71 | 72 | 你可以通过主题选项和页面 Frontmatter 自定义它们。 73 | -------------------------------------------------------------------------------- /.github/workflows/deploy-docs.yml: -------------------------------------------------------------------------------- 1 | name: 部署文档 2 | 3 | on: 4 | push: 5 | branches: 6 | # 确保这是你正在使用的分支名称 7 | - master 8 | 9 | jobs: 10 | deploy-gh-pages: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout 14 | uses: actions/checkout@v3 15 | with: 16 | fetch-depth: 0 17 | # 如果你文档需要 Git 子模块,取消注释下一行 18 | # submodules: true 19 | 20 | - name: 安装 pnpm 21 | uses: pnpm/action-setup@v2 22 | with: 23 | version: 7 24 | run_install: true 25 | 26 | - name: 设置 Node.js 27 | uses: actions/setup-node@v3 28 | with: 29 | node-version: 16 30 | cache: pnpm 31 | 32 | - name: 安装依赖 33 | run: pnpm install --frozen-lockfile 34 | 35 | - name: 构建文档 36 | env: 37 | NODE_OPTIONS: --max_old_space_size=8192 38 | run: |- 39 | pnpm run docs:build 40 | > docs/.vuepress/dist/.nojekyll 41 | 42 | - name: 部署文档 43 | uses: JamesIves/github-pages-deploy-action@v4 44 | with: 45 | # 这是文档部署到的分支名称 46 | branch: gh-pages 47 | folder: docs/.vuepress/dist 48 | 49 | - name: gitee同步 50 | uses: wearerequired/git-mirror-action@master 51 | env: 52 | SSH_PRIVATE_KEY: ${{ secrets.GITEE_KEY }} 53 | with: 54 | source-repo: git@github.com:CcSimple/sv-print-docs.git 55 | destination-repo: git@gitee.com:CcSimple/sv-print-docs.git 56 | 57 | - name: giteePages 58 | uses: yanglbme/gitee-pages-action@master 59 | with: 60 | gitee-username: CcSimple 61 | gitee-password: ${{ secrets.GITEE_PASSWORD }} 62 | gitee-repo: CcSimple/sv-print-docs 63 | branch: gh-pages 64 | -------------------------------------------------------------------------------- /docs/config/provider.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: provider 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ::: tip 提示 8 | 9 | 这里的说的 ==provider== 可以理解成 "可拖拽元素" 的提供者。浏览器控制台输入 `hiprint.ElementTypes` 即可查看。==仅 sv-print 支持查看 hiprint.ElementTypes== 10 | 11 | ::: 12 | 13 | ### 示例 14 | 15 | ```js 16 | import { hiprint } from "sv-print"; 17 | // 以 defaultElementTypeProvider 为例 18 | // 这里可以理解成 返回了一个 带有 addElementTypes 的 可以传入 options 去实例化的对象。 19 | // 如: test.js 这里的 context, 是内部去传的。 20 | // let test = new test(options), test.addElementTypes(context); 21 | export default function (options) { 22 | var addElementTypes = function (context) { 23 | // 移除 旧的 defaultModule "元素"类型, 以避免重复 24 | context.removePrintElementTypes("defaultModule"); 25 | // 添加 defaultModule "元素"类型 26 | context.addPrintElementTypes("defaultModule", [ 27 | // PrintElementTypeGroup 分组 28 | // 如果使用 hiprint.PrintElementTypeManager.build('.hiprintEpContainer2', "defaultModule") 这里会渲染这个 "常规" 分组名称 29 | new hiprint.PrintElementTypeGroup("常规", [ 30 | { 31 | tid: "defaultModule.text", // 唯一 key 32 | type: "text", // 元素类型 33 | title: "文本", // 这里和 options 中的 title 一样。"拖拽时就显示" 优先级高于 options 的, "无法彻底删除" 34 | // field: 'text' // 这里和 options 中的 field 一样。优先级高于 options 的, "无法彻底删除" 35 | // data: "1111", // 这里和 options 中的 testData 一样。会有冲突, "无法彻底删除" 36 | options: { 37 | title: "文本2", // 标题, "拖进设计器才会显示" 38 | field: "text", // 字段名称 39 | testData: "123", // 测试数据 40 | }, 41 | }, 42 | ]), 43 | new hiprint.PrintElementTypeGroup("辅助", [ 44 | { 45 | tid: "defaultModule.hline", 46 | title: "横线", 47 | type: "hline", 48 | }, 49 | ]), 50 | ]); 51 | }; 52 | return { 53 | addElementTypes: addElementTypes, 54 | }; 55 | }; 56 | ``` 57 | -------------------------------------------------------------------------------- /docs/config/image.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 图片 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | ---------- | ---------- | ----------------------------------------------------------------------------------- | ----------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | field | `string` | 字段名称
`同 options 的 field` | `优先级高于 options`
==无法彻底删除== | 19 | | data | `string` | 同==测试数据==但参数列表不会显示
`同 options 的 testData` ==需要先设置 field== | `优先级高于 options`
==无法彻底删除== | 20 | | formatter | `function` | 格式化函数
`同 options 的 formatter` | `优先级高于 options`
==无法彻底删除== | 21 | | styler | `function` | 样式函数
`同 options 的 styler` | `优先级高于 options`
==无法彻底删除== | 22 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 23 | 24 | ### options 25 | 26 | ::: info 温馨提示 27 | 28 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 29 | 30 | ::: 31 | 32 | | 名称 | 类型 | 说明 | 备注 | 33 | | ---- | -------- | ------------------------ | ------------------------------------------------------------------- | 34 | | src | `string` | 图片地址 同 `` 标签 | `base64` 或 `网络路径` ==直接打印需要能够正常访问的全路径== | 35 | | fit | `string` | 图片缩放格式 | `contain:等比`
`cover:剪裁`
`fill:填充`
`none:原始尺寸` | 36 | -------------------------------------------------------------------------------- /docs/sv-print/start.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 开始 3 | category: 4 | - sv-print 5 | --- 6 | 7 | ::: tip 温馨提示 8 | 9 | 目前国内项目使用 Svelte 开发管理系统的可能比较少。所以这里以 Vue 使用方式作为示例。 10 | 11 | ::: 12 | 13 | ### 安装 14 | 15 | @include(../guide/README.md{16-20}) 16 | 17 | @include(../guide/README.md{22-31}) 18 | 19 | ==请选择你需要的版本== 20 | 21 | ``` 22 | npm i @sv-print/vue 23 | ``` 24 | 25 | ### 引入组件样式 26 | 27 | 以 vue 为例: 28 | 29 | 在==main.js== 文件中引入组件样式 30 | 31 | ```js 32 | import Vue from "vue"; 33 | import App from "./App.vue"; 34 | // 引入组件样式 35 | import "sv-print/dist/style.css"; 36 | 37 | Vue.config.productionTip = false; 38 | 39 | new Vue({ 40 | render: (h) => h(App), 41 | }).$mount("#app"); 42 | ``` 43 | 44 | ### 引入打印样式 45 | 46 | ::: danger 重要提醒 47 | 48 | 需要复制【==node_modules/@sv-print/hiprint/dist/print-lock.css==】到开发资源目录。
49 | 例如: Vue 项目的 ==public== 目录。
50 | 假如你部署的网站是: `https://www.abcd.com/index.html` 那么确保 `https://www.abcd.com/print-lock.css` 能够正常访问 51 | 52 | ::: 53 | 54 | > ==在你项目的 index.html 入口 添加 print-lock.css 打印样式【名称 print-lock.css】== 55 | 56 | > ==注意: media="print"== 57 | 58 | 59 | ```html 60 | 61 | 62 | ``` 63 | 64 | ### 引入组件 65 | 66 | ```vue 67 | 83 | 84 | 103 | ``` 104 | -------------------------------------------------------------------------------- /docs/en/guide/page.md: -------------------------------------------------------------------------------- 1 | --- 2 | # This is the title of the article 3 | title: page config 4 | # This is the icon of the page 5 | icon: page 6 | # This control sidebar order 7 | order: 1 8 | # Set author 9 | author: Ms.Hope 10 | # Set writing time 11 | date: 2020-01-01 12 | # A page can have multiple categories 13 | category: 14 | - Guide 15 | # A page can have multiple tags 16 | tag: 17 | - Page config 18 | - Guide 19 | # this page is sticky in article list 20 | sticky: true 21 | # this page will appear in starred articles 22 | star: true 23 | # You can customize footer content 24 | footer: Footer content for test 25 | # You can customize copyright content 26 | copyright: No Copyright 27 | --- 28 | 29 | Content before `more` comment is regarded as page excerpt. 30 | 31 | 32 | 33 | ## Page Information 34 | 35 | You can set page information in Markdown’s Frontmatter. 36 | 37 | - The author is Ms.Hope. 38 | - The writing date is January 1, 2020 39 | - Category is "Guide" 40 | - Tags are "Page Config" and "Guide" 41 | 42 | ## Page Content 43 | 44 | You are free to write your Markdown here. 45 | 46 | ::: tip Assets 47 | 48 | - You can place images besides your markdown files, but you should use **relative links** (i.e.: starting with `./`) for them. 49 | 50 | - For images in `.vuepress/public` directory, please use absolute links (i.e.: startingwith `/`) for them. 51 | 52 | ::: 53 | 54 | The theme contains a custom badge: 55 | 56 | > A dark blue badge text badge at the end of line. 57 | 58 | ## Page Structure 59 | 60 | This page should contain: 61 | 62 | - [BreadCrumb](https://vuepress-theme-hope.github.io/v2/guide/layout/breadcrumb.html) 63 | - [Title and infomation](https://vuepress-theme-hope.github.io/v2/guide/feature/page-info.html) 64 | - [TOC (Table of Contents)](https://vuepress-theme-hope.github.io/v2/guide/layout/page.html#header-list) 65 | - [Meta infomation including update time and contributors](https://vuepress-theme-hope.github.io/v2/guide/feature/meta.html) 66 | - [Comments](https://vuepress-theme-hope.github.io/v2/guide/feature/comment.html) 67 | - [Navbar](https://vuepress-theme-hope.github.io/v2/guide/layout/navbar.html) 68 | - [Sidebar](https://vuepress-theme-hope.github.io/v2/guide/layout/sidebar.html) 69 | - [Footer](https://vuepress-theme-hope.github.io/v2/guide/layout/footer.html) 70 | - Back to top button 71 | 72 | You can customize them in theme options and page frontmatter. 73 | -------------------------------------------------------------------------------- /docs/.vuepress/config.ts: -------------------------------------------------------------------------------- 1 | import { defineUserConfig } from "vuepress"; 2 | import { docsearchPlugin } from "@vuepress/plugin-docsearch"; 3 | import { sitemapPlugin } from "vuepress-plugin-sitemap2"; 4 | import theme from "./theme.js"; 5 | 6 | export default defineUserConfig({ 7 | base: "/sv-print-docs/", 8 | port: 9981, 9 | locales: { 10 | "/": { 11 | lang: "zh-CN", 12 | title: "sv-print", 13 | description: "使用svelte开发的打印设计器组件(基于hiprint)", 14 | }, 15 | // "/en": { 16 | // lang: "en-US", 17 | // title: "sv-print", 18 | // description: "Print designer developed by svelte (based on hiprint)", 19 | // }, 20 | }, 21 | 22 | theme, 23 | 24 | plugins: [ 25 | sitemapPlugin({ 26 | hostname: "https://ccsimple.github.io/sv-print-docs/", 27 | }), 28 | docsearchPlugin({ 29 | appId: "EK98MFQYBD", 30 | apiKey: "591323234172ec0d4b26c7e21754c7e9", 31 | indexName: "sv-print", 32 | locales: { 33 | "/": { 34 | placeholder: "搜索文档", 35 | translations: { 36 | button: { 37 | buttonText: "搜索文档", 38 | buttonAriaLabel: "搜索文档", 39 | }, 40 | modal: { 41 | searchBox: { 42 | resetButtonTitle: "清除查询条件", 43 | resetButtonAriaLabel: "清除查询条件", 44 | cancelButtonText: "取消", 45 | cancelButtonAriaLabel: "取消", 46 | }, 47 | startScreen: { 48 | recentSearchesTitle: "搜索历史", 49 | noRecentSearchesText: "没有搜索历史", 50 | saveRecentSearchButtonTitle: "保存至搜索历史", 51 | removeRecentSearchButtonTitle: "从搜索历史中移除", 52 | favoriteSearchesTitle: "收藏", 53 | removeFavoriteSearchButtonTitle: "从收藏中移除", 54 | }, 55 | errorScreen: { 56 | titleText: "无法获取结果", 57 | helpText: "你可能需要检查你的网络连接", 58 | }, 59 | footer: { 60 | selectText: "选择", 61 | navigateText: "切换", 62 | closeText: "关闭", 63 | searchByText: "搜索提供者", 64 | }, 65 | noResultsScreen: { 66 | noResultsText: "无法找到相关结果", 67 | suggestedQueryText: "你可以尝试查询", 68 | reportMissingResultsText: "你认为该查询应该有结果?", 69 | reportMissingResultsLinkText: "点击反馈", 70 | }, 71 | }, 72 | }, 73 | }, 74 | // "/en": { 75 | // placeholder: "Search Docs", 76 | // translations: { 77 | // button: { 78 | // buttonText: "Search Docs", 79 | // }, 80 | // }, 81 | // }, 82 | }, 83 | }), 84 | ], 85 | }); 86 | -------------------------------------------------------------------------------- /docs/.vuepress/theme.ts: -------------------------------------------------------------------------------- 1 | import { hopeTheme } from "vuepress-theme-hope"; 2 | import * as navbar from "./navbar/index.js"; 3 | import * as sidebar from "./sidebar/index.js"; 4 | 5 | export default hopeTheme({ 6 | // 主题色 7 | themeColor: { 8 | blue: "#2196f3", 9 | red: "#f26d6d", 10 | green: "#3eaf7c", 11 | orange: "#fb9b5f", 12 | }, 13 | // 全屏按钮 14 | fullscreen: true, 15 | // sitemap 网站部署域名 16 | // hostname: "https://vuepress-theme-hope-v2-demo.mrhope.site", 17 | // 全局默认作者 18 | author: { 19 | name: "CcSimple", 20 | url: "https://github.com/CcSimple", 21 | }, 22 | // 字体图标资源链接 iconfont / fontawesome 23 | iconAssets: "iconfont", 24 | // 左侧logo 25 | logo: "/logo.svg", 26 | // github 仓库 27 | repo: "CcSimple/sv-print-docs", 28 | // 布局 https://vuepress-theme-hope.github.io/v2/zh/config/frontmatter/layout.html#pageinfo 29 | pageInfo: ["Author", "Date", "Category", "Tag", "ReadingTime"], 30 | // 多语言 31 | locales: { 32 | "/": { 33 | navbar: navbar.zh, 34 | sidebar: sidebar.zh, 35 | footer: "sv-print", 36 | displayFooter: true, 37 | }, 38 | // "/en": { 39 | // navbar: navbar.en, 40 | // sidebar: sidebar.en, 41 | // footer: "sv-print", 42 | // displayFooter: true, 43 | // }, 44 | }, 45 | // 加密 46 | encrypt: { 47 | config: { 48 | "/guide/encrypt.html": ["1234"], 49 | "/en/guide/encrypt.html": ["1234"], 50 | }, 51 | }, 52 | // 插件 53 | plugins: { 54 | // 博客:https://vuepress-theme-hope.github.io/v2/zh/config/plugins/blog.html 55 | blog: false, 56 | // 评论:https://vuepress-theme-hope.github.io/v2/comment/zh/config/ 57 | comment: { 58 | // https://giscus.app/zh-CN 59 | provider: "Giscus", 60 | repo: "CcSimple/giscus-discussions", 61 | repoId: "R_kgDOIA34nQ", 62 | category: "Announcements", 63 | categoryId: "DIC_kwDOIA34nc4CRe6K", 64 | }, 65 | // Markdown 增强功能 66 | mdEnhance: { 67 | align: true, 68 | attrs: true, 69 | chart: true, 70 | codetabs: true, 71 | container: true, 72 | demo: true, 73 | echarts: true, 74 | flowchart: true, 75 | gfm: true, 76 | imageSize: true, 77 | include: true, 78 | lazyLoad: true, 79 | mark: true, 80 | mermaid: true, 81 | playground: { 82 | presets: ["ts", "vue"], 83 | }, 84 | presentation: { 85 | plugins: ["highlight", "math", "search", "notes", "zoom"], 86 | }, 87 | stylize: [ 88 | { 89 | matcher: "Recommanded", 90 | replacer: ({ tag }) => { 91 | if (tag === "em") 92 | return { 93 | tag: "Badge", 94 | attrs: { type: "tip" }, 95 | content: "Recommanded", 96 | }; 97 | }, 98 | }, 99 | ], 100 | sub: true, 101 | sup: true, 102 | tabs: true, 103 | tex: true, 104 | vpre: true, 105 | vuePlayground: true, 106 | }, 107 | }, 108 | }); 109 | -------------------------------------------------------------------------------- /docs/config/start.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: hiprint插件使用 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ## 安装 8 | 9 | ::: tip 温馨提示 10 | 11 | 这里以 @sv-print/hiprint 使用为例。 12 | 若想使用官网的版本,请参考 [官网文档](http://hiprint.io/docs/start) 13 | 14 | ::: 15 | 16 | ```js 17 | npm i @sv-print/hiprint 18 | ``` 19 | 20 | ### 引入打印样式 21 | 22 | ::: danger 重要提醒 23 | 24 | 需要复制【==node_modules/@sv-print/hiprint/dist/print-lock.css==】到开发资源目录。
25 | 例如: Vue 项目的 ==public== 目录。
26 | 假如你部署的网站是: `https://www.abcd.com/index.html` 那么确保 `https://www.abcd.com/print-lock.css` 能够正常访问 27 | 28 | ::: 29 | 30 | > ==在你项目的 index.html 入口 添加 print-lock.css 打印样式【名称 print-lock.css】== 31 | 32 | > ==注意: media="print"== 33 | 34 | 35 | ```html 36 | 37 | 38 | ``` 39 | 40 | ### 使用 41 | 42 | ```vue 43 | 55 | 56 | 104 | ``` 105 | -------------------------------------------------------------------------------- /docs/en/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | icon: home 4 | title: sv-print 5 | heroImage: /logo.svg 6 | heroText: sv-print 7 | tagline: Print designer developed by svelte (based on hiprint) 8 | actions: 9 | - text: guide 💡 10 | link: guide/ 11 | type: primary 12 | 13 | - text: demo 🎾 14 | link: https://ccsimple.gitee.io/vue-plugin-hiprint/ 15 | type: primary 16 | 17 | features: 18 | - title: Markdown 增强 19 | icon: markdown 20 | details: 新增文字对齐、上下角标、脚注、标记、任务列表、数学公式、流程图、图表与幻灯片支持 21 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/ 22 | 23 | - title: 幻灯片页面 24 | icon: slides 25 | details: 添加幻灯片页面以显示你喜欢的内容 26 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/layout/slides 27 | 28 | - title: 布局增强 29 | icon: layout 30 | details: 添加路径导航、页脚、改进的导航栏、改进的页面导航等。 31 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/layout/ 32 | 33 | - title: 浏览量与评论 34 | icon: comment 35 | details: 配合 Waline 来开启阅读量统计与评论支持 36 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/comment.html 37 | 38 | - title: 文章信息 39 | icon: info 40 | details: 为你的文章添加作者、写作日期、预计阅读时间、字数统计等信息 41 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/page-info.html 42 | 43 | - title: 博客支持 44 | icon: blog 45 | details: 使用一些很棒的布局提供博客功能,通过文章的日期、标签和分类,自动生成文章、分类、标签与时间轴列表 46 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/blog/intro.html 47 | 48 | - title: 主题色切换 49 | icon: palette 50 | details: 支持自定义主题色并允许用户在预设的主题颜色之间切换 51 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/interface/theme-color.html 52 | 53 | - title: 深色模式 54 | icon: contrast 55 | details: 可以自由切换浅色模式与深色模式 56 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/interface/darkmode.html 57 | 58 | - title: 完整的无障碍支持 59 | icon: support 60 | details: 为你的网站带来完整的无障碍支持 61 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/interface/accessibility.html 62 | 63 | - title: 文章加密 64 | icon: lock 65 | details: 你可以为你的特定页面或特定目录进行加密,以便陌生人不能随意访问它们 66 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/encrypt.html 67 | 68 | - title: 复制按钮 69 | icon: copy 70 | details: 一键复制代码块中的代码 71 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/copy-code.html 72 | 73 | - title: 图片预览 74 | icon: pic 75 | details: 像相册一样允许你浏览、缩放并分享你的页面图片 76 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/photo-swipe.html 77 | 78 | - title: SEO 增强 79 | icon: config 80 | details: 将最终生成的网页针对搜索引擎进行优化。 81 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/seo.html 82 | 83 | - title: Sitemap 84 | icon: sitemap 85 | details: 自动为你的网站生成 Sitemap 86 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/sitemap.html 87 | 88 | - title: Feed 支持 89 | icon: rss 90 | details: 生成你的 Feed,并通知你的用户订阅它 91 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/feed.html 92 | 93 | - title: PWA 支持 94 | icon: mobile 95 | details: 让你的网站更像一个 APP 96 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/pwa.html 97 | 98 | - title: 更多新特性 99 | icon: more 100 | details: 包括图标支持、全屏按钮、返回顶部按钮等 101 | link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/ 102 | 103 | copyright: false 104 | footer: Apache Licensed | Copyright © 2022-present sv-print 105 | --- 106 | -------------------------------------------------------------------------------- /docs/.vuepress/sidebar/zh.ts: -------------------------------------------------------------------------------- 1 | import { sidebar } from "vuepress-theme-hope"; 2 | 3 | export const zh = sidebar({ 4 | "/": [ 5 | { 6 | text: "使用指南", 7 | collapsible: true, 8 | children: [ 9 | { 10 | text: "介绍", 11 | prefix: "guide/", 12 | link: "guide/intro", 13 | }, 14 | { 15 | text: "快速上手", 16 | prefix: "guide/", 17 | link: "guide/", 18 | }, 19 | { 20 | text: "优化概览", 21 | prefix: "guide/", 22 | link: "guide/overview", 23 | }, 24 | ], 25 | }, 26 | { 27 | text: "hiprint&模板&元素", 28 | collapsible: true, 29 | children: [ 30 | { 31 | text: "js插件使用", 32 | prefix: "config/", 33 | link: "config/start", 34 | }, 35 | { 36 | text: "hiprint", 37 | prefix: "config/", 38 | link: "config/hiprint", 39 | }, 40 | { 41 | text: "provider", 42 | prefix: "config/", 43 | link: "config/provider", 44 | }, 45 | { 46 | text: "模板", 47 | prefix: "config/", 48 | link: "config/template", 49 | }, 50 | { 51 | text: "面板", 52 | prefix: "config/", 53 | link: "config/panel", 54 | }, 55 | { 56 | text: "文本", 57 | prefix: "config/", 58 | link: "config/text", 59 | }, 60 | { 61 | text: "图片", 62 | prefix: "config/", 63 | link: "config/image", 64 | }, 65 | { 66 | text: "表格", 67 | prefix: "config/", 68 | link: "config/table", 69 | }, 70 | { 71 | text: "长文", 72 | prefix: "config/", 73 | link: "config/longText", 74 | }, 75 | { 76 | text: "html", 77 | prefix: "config/", 78 | link: "config/html", 79 | }, 80 | { 81 | text: "横线", 82 | prefix: "config/", 83 | link: "config/hLine", 84 | }, 85 | { 86 | text: "竖线", 87 | prefix: "config/", 88 | link: "config/vLine", 89 | }, 90 | { 91 | text: "矩形", 92 | prefix: "config/", 93 | link: "config/rect", 94 | }, 95 | { 96 | text: "椭圆", 97 | prefix: "config/", 98 | link: "config/oval", 99 | }, 100 | ], 101 | }, 102 | { 103 | text: "sv-print", 104 | collapsible: true, 105 | children: [ 106 | { 107 | text: "组件使用", 108 | prefix: "sv-print/", 109 | link: "sv-print/start", 110 | }, 111 | { 112 | text: "参数&回调", 113 | prefix: "sv-print/", 114 | link: "sv-print/options", 115 | }, 116 | { 117 | text: "自定义默认拖拽元素", 118 | prefix: "sv-print/", 119 | link: "sv-print/provider", 120 | }, 121 | ], 122 | }, 123 | { 124 | text: "插件", 125 | collapsible: true, 126 | children: [ 127 | { 128 | text: "介绍", 129 | prefix: "plugin/", 130 | link: "plugin/intro", 131 | }, 132 | ], 133 | }, 134 | // { 135 | // text: "快速上手", 136 | // // collapsable: false, // 折叠 137 | // prefix: "guide/", 138 | // link: "guide/", 139 | // // children: "structure", 140 | // }, 141 | // { 142 | // text: "markdown使用示例", 143 | // icon: "creative", 144 | // prefix: "guide/", 145 | // link: "guide/markdown", 146 | // // children: "structure", 147 | // }, 148 | // "slides", 149 | ], 150 | }); 151 | -------------------------------------------------------------------------------- /docs/en/guide/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get started 3 | icon: creative 4 | category: 5 | - Get started 6 | --- 7 | 8 | ### install 9 | 10 | 目前支持框架/js 如下: 11 | 12 | | Package | Status | Description | 13 | | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------- | 14 | | [sv-print](https://github.com/CcSimple/sv-print/tree/main/packages/sv-print) | [![npm](https://img.shields.io/npm/v/sv-print?label=)](https://npm.im/sv-print) | Svelte/Vanilla JS 组件 | 15 | | [@sv-print/react](https://github.com/CcSimple/sv-print/tree/main/packages/react) | [![npm](https://img.shields.io/npm/v/@sv-print/react.svg?label=)](https://npm.im/@sv-print/react) | React 组件 | 16 | | [@sv-print/vue](https://github.com/CcSimple/sv-print/tree/main/packages/packages/vue) | [![npm](https://img.shields.io/npm/v/@sv-print/vue.svg?label=)](https://npm.im/@sv-print/vue) | Vue 2 组件 | 17 | | [@sv-print/vue3](https://github.com/CcSimple/sv-print/tree/main/packages/vue3) | [![npm](https://img.shields.io/npm/v/@sv-print/vue3.svg?label=)](https://npm.im/@bytemd/vue3) | Vue 3 组件 | 18 | | [@sv-print/hiprint](https://github.com/CcSimple/sv-print/tree/main/packages/hiprint) | [![npm](https://img.shields.io/npm/v/@sv-print/hiprint.svg?label=)](https://npm.im/@bytemd/vue3) | hiprint core (js 库) | 19 | 20 | ::: code-tabs 21 | 22 | @tab:active pnpm 23 | 24 | ```bash 25 | pnpm add sv-print 26 | ``` 27 | 28 | @tab yarn 29 | 30 | ```bash 31 | yarn add sv-print 32 | ``` 33 | 34 | @tab npm 35 | 36 | ```bash 37 | npm i sv-print 38 | ``` 39 | 40 | ::: 41 | 42 | ### use 43 | 44 | ::: code-tabs 45 | 46 | @tab:active Svelte 47 | 48 | ```vue 49 | 61 | 62 | 65 | ``` 66 | 67 | @tab Vue 68 | 69 | ```vue 70 | 73 | 74 | 90 | ``` 91 | 92 | @tab React 93 | 94 | ```js 95 | import "sv-print/dist/style.css"; // 一般在入口文件(index/main)添加 96 | import { Designer } from "@sv-print/react"; 97 | 98 | const App = () => { 99 | const [template, setTemplate] = useState({}); 100 | 101 | return ( 102 | { 105 | console.log(e); 106 | }} 107 | /> 108 | ); 109 | }; 110 | ``` 111 | 112 | @tab Vanilla JS 113 | 114 | ```js 115 | import "sv-print/dist/style.css"; 116 | import { Designer } from "sv-print"; 117 | 118 | const designer = new Designer({ 119 | target: document.body, // 容器 120 | props: { 121 | template: {}, 122 | }, 123 | }); 124 | 125 | designer.$on("onDesigned", (e) => { 126 | console.log(e); 127 | }); 128 | ``` 129 | 130 | ::: 131 | -------------------------------------------------------------------------------- /docs/config/panel.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 面板 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### 面板对象 8 | 9 | ::: tip 提示 10 | 11 | 面板是模板对象的核心。==所有打印元素实际存储的位置都在面板中==。可以理解成 `“模板”` 是画框,`“面板”` 才是真正的画布。 12 | 13 | ::: 14 | 15 | ```js 16 | let hiprintTemplate = new hiprint.PrintTemplate(options); 17 | // 新建一个面板, 宽:100 高:100 18 | let panel = hiprintTemplate.addPrintPanel({ width: 100, height: 100 }); 19 | ``` 20 | 21 | ### 参数 22 | 23 | | 名称 | 类型 | 说明 | 备注 | 24 | | ------------------- | --------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | 25 | | panelPageRule | `string` | 分页规则 默认 `''` | 设置 `none` 不分页 ==小票打印== | 26 | | name | `string` | 面板名称 `默认面板名称` | ==多面板==时显示 | 27 | | width | `number` | 打印纸张宽度 `mm` | | 28 | | height | `number` | 打印纸张高度 `mm` | | 29 | | leftOffset | `number` | 打印左偏移量 `mm`
==当打印遇到部分显示不全很有用== | 将覆盖面板的左偏移
`template.print(data,{leftOffset:-1})`
`template.getHtml(data,{leftOffset:-1})` | 30 | | topOffset | `number` | 打印上偏移量 `mm`
==当打印遇到部分显示不全很有用== | 将覆盖面板的上偏移
`template.print(data,{topOffset:-1})`
`template.getHtml(data,{topOffset:-1})` | 31 | | paperHeader | `number` | 页眉线 `mm` 默认 0 | 此高度之==上==的元素, 可设置每页显示
==分页内容开始位置== | 32 | | paperFooter | `number` | 页脚线 `mm` 默认 纸张底部 | 此高度之==下==的元素, 可设置每页显示
==分页内容结束位置== | 33 | | paperNumberDisabled | `boolean` | 不显示页码 默认 false | 设计时显示`灰色`, 双击页码则切换状态 | 34 | | paperNumberFormat | `string` | 页码格式 默认 `paperNo-paperCount` | | 35 | | fontFamily | `string` | 字体 | ==如果"元素"没设置则继承这个字体== | 36 | | orient | `string` | 纸张方向(仅自定义纸张有效)
`1:纵向 2:横向` | ==默认自带有 A1-A8 B1-B8== | 37 | | panelPaperRule | `string` | 面板打印纸张规则
`odd`:打印纸张保持奇数
`even`:打印纸张保持偶数 | | 38 | | firstPaperFooter | `number` | 首页页尾线位置 | 顾名思义
第一页的==页尾线高度== | 39 | | lastPaperFooter | `number` | 尾页页尾线位置 | 顾名思义
最后一页的==页尾线高度== | 40 | | evenPaperFooter | `number` | 偶数页页尾线位置 | 顾名思义
偶数页的==页尾线高度== | 41 | | oddPaperFooter | `number` | 奇数页页尾线位置 | 顾名思义
奇数页的==页尾线高度== | 42 | | watermarkOptions | `object` | 水印参数 | ==点击面板==可查看可配置项 | 43 | -------------------------------------------------------------------------------- /docs/config/hiprint.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: hiprint 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ::: tip 注意 8 | 9 | 这里的说的 ==hiprint== 是全局的对象。可以理解成是个 ==Module==。浏览器控制台输入 `hiprint` 即可查看。 10 | 11 | ::: 12 | 13 | ### 使用示例 14 | 15 | ```js 16 | // 初始化 provider , 才能让 "可拖拽元素" 可正常拖拽 【因为要先去处理 provider 中的 "tid"】 17 | hiprint.init({ 18 | providers: [new defaultElementTypeProvider()], 19 | }); 20 | // !!!【仅 sv-print 支持】 21 | // 注册插件 22 | import pluginScale from "@sv-print/plugin-scale"; 23 | hiprint.register({ 24 | plugins: [pluginScale({ name: "缩放(自定义)" })], 25 | }); 26 | // 调整配置 27 | hiprint.setConfig(); // 还原配置 28 | // 不显示 "宽高大小" 盒子 更多配置 可在浏览器控制台 输入 window.HIPRINT_CONFIG 查看。 29 | hiprint.setConfig({ 30 | showSizeBox: false, 31 | }); 32 | // 创建模板对象 详见 "模板" 文档 33 | let hiprintTemplate = new hiprint.PrintTemplate({ template: {} }); 34 | let hiprintTemplate2 = new hiprint.PrintTemplate({ template: {} }); 35 | // 打印数据 36 | let printData = { text: "这是打印时显示的文本" }; 37 | // 多模板预览 38 | hiprint.getHtml({ 39 | templates: [ 40 | { template: hiprintTemplate, data: printData }, 41 | { template: hiprintTemplate2, data: printData }, 42 | ], 43 | }); 44 | // 多模板打印 45 | hiprint.print({ 46 | templates: [ 47 | { template: hiprintTemplate, data: printData }, 48 | { template: hiprintTemplate2, data: printData }, 49 | ], 50 | }); 51 | // 多模板直接打印 52 | hiprint.print2( 53 | { 54 | templates: [ 55 | { template: hiprintTemplate, data: printData, options: {} }, 56 | { template: hiprintTemplate2, data: printData }, 57 | ], 58 | options: { printer: "", landscape: true }, 59 | }, 60 | function (data) { 61 | console.log("printSuccess"); 62 | }, 63 | function (e) { 64 | console.log("printError"); 65 | } 66 | ); 67 | // 更新 "可拖拽元素" 属性 68 | hiprint.updateElementType("defaultModule.text", (type) => { 69 | type.title = "这是更新后的元素"; 70 | return type; 71 | }); 72 | // 切换 直接 "打印客户端" 主机 73 | hiprint.hiwebSocket.setHost("192.168.2.3:17521"); 74 | // 查看是否 已连接 "直接打印客户端" 75 | hiprint.hiwebSocket.opened; // true 或 false 76 | // 刷新获取 打印机列表 !! 需要已连接 "直接打印客户端" 77 | hiprint.refreshPrinterList((list) => { 78 | console.log(list); 79 | }); 80 | // 获取 MAC、IP 地址等 !! 需要已连接 "直接打印客户端" 81 | // 参数格式: 82 | // 1. 类型(ip、ipv6、mac、dns、all、interface、vboxnet) 83 | // 2. 回调 data => {addr, e} addr: 返回的数据 e:错误信息 84 | // 3. 其他参数 ...args 85 | hiprint.getAddress("mac", (data) => { 86 | console.log("mac"); 87 | console.log(data); 88 | }); 89 | hiprint.getAddress("ip", (data) => { 90 | console.log("ip"); 91 | console.log(data); 92 | }); 93 | // !!!【仅 sv-print 支持】 94 | // 查看当前已加载的 ElementTypes --> provider 95 | hiprint.ElementTypes.allElementTypes; // 所有 "可拖拽元素" 96 | // 查看 context.addPrintElementTypes("defaultModule",[]) 的元素 97 | // defaultModule 可以理解成 provider 的 key 98 | hiprint.ElementTypes.defaultModule; 99 | // 构建渲染 "可拖拽元素" 100 | hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item")); // 方式 1,完全自定义元素样式 101 | hiprint.PrintElementTypeManager.build(".hiprintEpContainer2", "defaultModule"); // 方式 2,仅显示分组和自定义元素的标题 102 | ``` 103 | 104 | ### API 105 | 106 | | 名称 | 说明 | 备注 | 107 | | ----------------------- | ------------------------------- | --------------------------------------- | 108 | | ElementTypes | 查看"可拖拽元素" | ==仅 sv-print 支持== | 109 | | PrintElementTypeGroup | "可拖拽元素"分组 | | 110 | | PrintElementTypeManager | "可拖拽元素"管理 | 构建"可拖拽元素" | 111 | | init | 初始化`provider` | ==重要== | 112 | | PrintTemplate | 创建模板对象 | ==核心== | 113 | | register | 注册`插件` | ==仅 sv-print 支持== | 114 | | setConfig | 更新配置 | | 115 | | updateElementType | 更新"可拖拽元素"参数 | | 116 | | print | `多模板`浏览器打印 | | 117 | | print2 | `多模板`直接打印 | | 118 | | getHtml | `多模板`预览 | | 119 | | hiwebSocket | `socket.io` 对象 | 直接打印、切换 直接 "打印客户端" 主机等 | 120 | | refreshPrinterList | 刷新获取打印机列表 | | 121 | | getAddress | 获取 `MAC`、`IP` 地址等 | ==需要已连接 "直接打印客户端"== | 122 | | ippPrint | `ipp`打印
==不稳定== | ==需要已连接 "直接打印客户端"== | 123 | | ippRequest | `ipp`自定义请求
==不稳定== | ==需要已连接 "直接打印客户端"== | 124 | -------------------------------------------------------------------------------- /docs/plugin/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | category: 4 | - 插件 5 | --- 6 | 7 | ### 关于插件 8 | 9 | sv-print 插件是结合 hiprint 底层逻辑。使用 hook 实现的简单插件机。目前提供的 hook 有限。支持如下: 10 | 11 | ::: tip 温馨提示 12 | 13 | 部分 hook 回调的参数不太好 翻译 它的具体作用。请 log 查看。 14 | 15 | ::: 16 | 17 | | hook | 说明 | 回调参数 | 备注 | 18 | | -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------- | 19 | | init | `hiprint.register` 时的 hook | `Config`
`OptionItems`
`ElementTypes`
`hinnn`
`hiprint` | 可实现自定义参数 | 20 | | ready | `$(document).ready` 时的 hook | `p`
`window`
| `ready` 时处理 | 21 | | documentShortcutKeys | `全局快捷键` hook | `panel`
`event`
| 自定义全局快捷键
如:`Ctrl + 1` | 22 | | shortcutKeys | `面板快捷键` hook
==当设计面板获取到焦点时的快捷键== | `panel`
`event`
| 如:`Ctrl + B` 将选中元素 字体加粗 | 23 | | createPrintElement | `创建元素` hook | `Config`
`BasePrintElement`
`Options`
`Supper`
`ele`
`eleOpt`
| 配合`init、beforePrint`等 hook 自定义新的元素 | 24 | | beforePrint | `浏览器打印前` hook
处理新元素 `打印样式` | `template`
`info`
`opts`
| ==返回该 3 个参数== | 25 | | beforePrint2 | `直接打印前` hook
处理新元素 `打印样式` | `template`
`info`
| ==返回该 2 个参数== | 26 | 27 | ### 示例 28 | 29 | 实现新增一个 ==缩放== 参数。 30 | 31 | ```ts 32 | import type { PluginOptions } from "sv-print"; 33 | 34 | // hook 函数 35 | const scale = ({ Config, OptionItems, hinnn, hiprint, name }) => { 36 | Config.registerItems([ 37 | (function () { 38 | function t() { 39 | // json模板 options 对应键值 40 | this.name = "scale"; 41 | } 42 | return ( 43 | (t.prototype.css = function (t, e) { 44 | // t: 元素对象, e 参数值 45 | if (t && t.length) { 46 | if (e) return t.css("transform", "scale(" + e + ")"); 47 | } 48 | return null; 49 | }), 50 | (t.prototype.createTarget = function (t, i, e) { 51 | // t: 元素对象,i: 元素options, e: 元素printElementType 52 | return ( 53 | (this.target = globalThis.$( 54 | `
\n
\n ${ 55 | name ? name : "缩放" 56 | }\n
\n
\n \n
\n
` 57 | )), 58 | this.target 59 | ); 60 | }), 61 | (t.prototype.getValue = function () { 62 | var t = this.target.find("input").val(); 63 | if (t) return parseFloat(t.toString()); 64 | }), 65 | (t.prototype.setValue = function (t) { 66 | // t: options 对应键的值 67 | this.target.find("input").val(t); 68 | }), 69 | (t.prototype.destroy = function () { 70 | this.target.remove(); 71 | }), 72 | t 73 | ); 74 | })(), 75 | ]); 76 | // transform 位置 idx 77 | let idx = Config.text.supportOptions.findIndex((o) => o.name === "transform"); 78 | // 将 scale 插入到 transform 位置后面 79 | idx >= 0 && 80 | Config.text.supportOptions.splice(idx + 1, 0, { 81 | name: "scale", 82 | hidden: false, 83 | }); 84 | // 这里是 tabs 分组 的处理。 同上 85 | const tabIndex = Config.text.tabs.findIndex((t) => t.name === "样式"); 86 | tabIndex >= 0 && (idx = Config.text.tabs[tabIndex].options.findIndex((o) => o.name === "transform")); 87 | idx && 88 | Config.text.tabs[tabIndex].options.splice(idx + 1, 0, { 89 | name: "scale", 90 | hidden: false, 91 | }); 92 | }; 93 | // 这是才是插件 hooks 的实例 94 | // 可自定义插入的参数 95 | export default function (config?: any): PluginOptions { 96 | let configs = { 97 | ...config, 98 | }; 99 | return { 100 | name: "scale", 101 | description: "「text」元素 缩放参数", 102 | hooks: [ 103 | // 接受多个 hook 组合 104 | { 105 | hook: "init", // 这是 hook 关键 106 | name: "scale", // 名称(可选) 暂时没用到这个 107 | description: "testF", // 描述(可选) 暂时没用到这个 108 | priority: 1, // 排序优先级 (可选) 暂时没用到这个 109 | // hook 110 | run: (opts) => scale({ ...opts, ...configs }), 111 | }, 112 | ], 113 | leastHiprintVersion: "0.1.0", 114 | }; 115 | } 116 | ``` 117 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | icon: home 4 | title: sv-print 5 | heroImage: /logo.svg 6 | heroText: sv-print 7 | tagline: 使用svelte开发的打印设计器组件(基于hiprint);本文档会有 hiprint 和 sv-print 的使用说明。 8 | actions: 9 | - text: 使用指南 💡 10 | link: /guide/intro 11 | 12 | - text: 快速上手 🚀 13 | link: /guide/ 14 | type: primary 15 | 16 | - text: 在线案例 🎾 17 | link: https://ccsimple.github.io/sv-print-demo/ 18 | 19 | features: 20 | - title: 多框架UI 组件 21 | icon: layout 22 | details: 目前已提供 Svelte、Vue、Vue3、React框架的 UI 组件 npm 包。 点击查看 23 | link: https://www.npmjs.com/search?q=%40sv-print 24 | 25 | - title: 插件支持 26 | icon: blog 27 | details: 可自定义插件,自定义自己的打印元素等等。点击查看 28 | link: https://www.npmjs.com/search?q=%40sv-print%20plugin 29 | 30 | - title: 模板编辑/数据编辑 31 | icon: slides 32 | details: 内置 json 编辑器,可编辑当前模板 json 和 打印预览的数据。 33 | 34 | - title: 布局美化 35 | icon: layout 36 | details: 简约的设计布局,内置打印预览窗口,可添加可拖拽元素,自定义初始位置等等。 37 | 38 | - title: 自带多种主题 39 | icon: palette 40 | details: 支持自定义主题色并允许用户在预设的主题颜色之间切换 使用 daisyui 41 | link: https://daisyui.com/ 42 | 43 | - title: 简约拖拽操作 44 | icon: support 45 | details: 支持框选、旋转、等比缩放、元素对齐、自定义可拖拽方向等等 46 | 47 | - title: 常用工具栏 48 | icon: config 49 | details: 常用编辑功能;如:撤销重做、对齐、复制粘贴、放大缩小等等,工具栏清晰明了 50 | 51 | - title: 更多功能 52 | icon: more 53 | details: 导入导出json模板、缩放、锁定编辑、快速放大/缩小字体等等 54 | 55 | copyright: false 56 | footer: LGPL Licensed | Copyright © 2022-present sv-print 57 | --- 58 | 59 | 60 | 61 | ## 🛠 安装 62 | 63 | ::: code-tabs 64 | 65 | @tab pnpm 66 | 67 | ```bash 68 | # Svelte/Vanilla JS 组件 69 | pnpm add sv-print 70 | # React 组件 71 | pnpm add @sv-print/react 72 | # Vue2 组件 73 | pnpm add @sv-print/vue 74 | # Vue3 组件 75 | pnpm add @sv-print/vue3 76 | ``` 77 | 78 | @tab yarn 79 | 80 | ```bash 81 | # Svelte/Vanilla JS 组件 82 | yarn add sv-print 83 | # React 组件 84 | yarn add @sv-print/react 85 | # Vue2 组件 86 | yarn add @sv-print/vue 87 | # Vue3 组件 88 | yarn add @sv-print/vue3 89 | ``` 90 | 91 | @tab:active npm 92 | 93 | ```bash 94 | # Svelte/Vanilla JS 组件 95 | npm i sv-print 96 | # React 组件 97 | npm i @sv-print/react 98 | # Vue2 组件 99 | npm i @sv-print/vue 100 | # Vue3 组件 101 | npm i @sv-print/vue3 102 | ``` 103 | 104 | ::: 105 | 106 | ::: danger 重要提醒 107 | 108 | 需要复制【==node_modules/@sv-print/hiprint/dist/print-lock.css==】到开发资源目录。
109 | 例如: Vue 项目的 ==public== 目录。
110 | 假如你部署的网站是: `https://www.abcd.com/index.html` 那么确保 `https://www.abcd.com/print-lock.css` 能够正常访问 111 | 112 | ::: 113 | 114 | > ==在你项目的 index.html 入口 添加 print-lock.css 打印样式【名称 print-lock.css】== 115 | 116 | > ==注意: media="print"== 117 | 118 | 119 | ```html 120 | 121 | 122 | ``` 123 | 124 | ## 🚀 使用 125 | 126 | ::: code-tabs 127 | 128 | @tab Svelte 129 | 130 | ```vue 131 | 143 | 144 | 147 | ``` 148 | 149 | @tab:active Vue 150 | 151 | ```vue 152 | 155 | 156 | 172 | ``` 173 | 174 | @tab:active Vue3 175 | 176 | ```vue 177 | 180 | 181 | 191 | ``` 192 | 193 | @tab React 194 | 195 | ```js 196 | import "sv-print/dist/style.css"; // 一般在入口文件(index/main)添加 197 | import { Designer } from "@sv-print/react"; 198 | 199 | const App = () => { 200 | const [template, setTemplate] = useState({}); 201 | 202 | return ( 203 | { 206 | console.log(e); 207 | }} 208 | /> 209 | ); 210 | }; 211 | ``` 212 | 213 | @tab Vanilla JS 214 | 215 | ```js 216 | import "sv-print/dist/style.css"; 217 | import { Designer } from "sv-print"; 218 | 219 | const designer = new Designer({ 220 | target: document.body, // 容器 221 | props: { 222 | template: {}, 223 | }, 224 | }); 225 | 226 | designer.$on("onDesigned", (e) => { 227 | console.log(e); 228 | }); 229 | ``` 230 | 231 | ::: 232 | 233 | ## 👍🏻 支持该项目 234 | 235 | ::: tip 感谢 236 | 237 | - 如果该项目对你有所帮助, 可以扫下方的二维码, 支持一下! 你的支持是我最大的动力! 238 | 239 | ::: 240 | 241 | 242 | 243 | 244 | 245 | 246 |
247 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 编组 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 快速上手 3 | icon: creative 4 | category: 5 | - 使用指南 6 | --- 7 | 8 | 13 | 14 | ### 依赖环境 15 | 16 | - [Node.js v16+](https://nodejs.org/en/)(开发环境是 16.18.1) 17 | - [Vite v3+](https://cn.vitejs.dev/)(开发环境是 ^3.2.5) 18 | - [Webpack v4+](https://www.webpackjs.com/)(使用 vue create 创建的项目测试可正常引入) 19 | - [jQuery/纯js 项目支持](https://jquery.com/)(使用 html + js 项目测试可正常引入 (需要demo 联系我)) 20 | 21 | ### 安装 22 | 23 | 目前支持框架/js 如下: 24 | 25 | | Package | Status | Description | 26 | | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------- | 27 | | [sv-print](https://github.com/CcSimple/sv-print/tree/main/packages/sv-print) | [![npm](https://img.shields.io/npm/v/sv-print?label=)](https://npm.im/sv-print) | Svelte/Vanilla JS 组件 | 28 | | [@sv-print/react](https://github.com/CcSimple/sv-print/tree/main/packages/react) | [![npm](https://img.shields.io/npm/v/@sv-print/react.svg?label=)](https://npm.im/@sv-print/react) | React 组件 | 29 | | [@sv-print/vue](https://github.com/CcSimple/sv-print/tree/main/packages/packages/vue) | [![npm](https://img.shields.io/npm/v/@sv-print/vue.svg?label=)](https://npm.im/@sv-print/vue) | Vue 2 组件 | 30 | | [@sv-print/vue3](https://github.com/CcSimple/sv-print/tree/main/packages/vue3) | [![npm](https://img.shields.io/npm/v/@sv-print/vue3.svg?label=)](https://npm.im/@bytemd/vue3) | Vue 3 组件 | 31 | | [@sv-print/hiprint](https://github.com/CcSimple/sv-print/tree/main/packages/hiprint) | [![npm](https://img.shields.io/npm/v/@sv-print/hiprint.svg?label=)](https://npm.im/@bytemd/vue3) | hiprint core (js 库) | 32 | 33 | 34 | > ==选择您项目环境版本安装即可== 35 | 36 | ::: code-tabs 37 | 38 | @tab pnpm 39 | 40 | ```bash 41 | # Svelte/Vanilla JS 组件 42 | pnpm add sv-print 43 | # React 组件 44 | pnpm add @sv-print/react 45 | # Vue2 组件 46 | pnpm add @sv-print/vue 47 | # Vue3 组件 48 | pnpm add @sv-print/vue3 49 | ``` 50 | 51 | @tab yarn 52 | 53 | ```bash 54 | # Svelte/Vanilla JS 组件 55 | yarn add sv-print 56 | # React 组件 57 | yarn add @sv-print/react 58 | # Vue2 组件 59 | yarn add @sv-print/vue 60 | # Vue3 组件 61 | yarn add @sv-print/vue3 62 | ``` 63 | 64 | @tab:active npm 65 | 66 | ```bash 67 | # Svelte/Vanilla JS 组件 68 | npm i sv-print 69 | # React 组件 70 | npm i @sv-print/react 71 | # Vue2 组件 72 | npm i @sv-print/vue 73 | # Vue3 组件 74 | npm i @sv-print/vue3 75 | ``` 76 | 77 | ::: 78 | 79 | ### 引入组件样式 80 | 81 | 以 vue3 为例: 82 | 83 | 在==main.ts/main.js== 文件中引入组件样式 84 | 85 | ```ts 86 | import { createApp } from "vue"; 87 | import App from "./App.vue"; 88 | // 引入组件样式 89 | import "sv-print/dist/style.css"; 90 | 91 | createApp(App).mount("#app"); 92 | 93 | ``` 94 | 95 | ### 引入打印样式 96 | 97 | ::: danger 重要提醒 98 | 99 | 需要复制【==node_modules/@sv-print/hiprint/dist/print-lock.css==】到开发资源目录。
100 | 例如: Vue 项目的 ==public== 目录。
101 | 假如你部署的网站是: `https://www.abcd.com/index.html` 那么确保 `https://www.abcd.com/print-lock.css` 能够正常访问 102 | 103 | ::: 104 | 105 | > ==在你项目的 index.html 入口 添加 print-lock.css 打印样式【名称 print-lock.css】== 106 | 107 | > ==注意: media="print"== 108 | 109 | 110 | ```html 111 | 112 | 113 | ``` 114 | 115 | ### 引入组件 116 | 117 | ::: code-tabs 118 | 119 | @tab Svelte 120 | 121 | ```vue 122 | 133 | 134 | 137 | ``` 138 | 139 | @tab:active Vue 140 | 141 | ```vue 142 | 145 | 146 | 161 | ``` 162 | 163 | @tab:active Vue3 164 | 165 | ```vue 166 | 169 | 170 | 179 | ``` 180 | 181 | @tab React 182 | 183 | ```js 184 | import { Designer } from "@sv-print/react"; 185 | 186 | const App = () => { 187 | const [template, setTemplate] = useState({}); 188 | 189 | return ( 190 | { 193 | console.log(e); 194 | }} 195 | /> 196 | ); 197 | }; 198 | ``` 199 | 200 | @tab Vanilla JS 201 | 202 | ```js 203 | import { Designer } from "sv-print"; 204 | 205 | const designer = new Designer({ 206 | target: document.body, // 容器 207 | props: { 208 | template: {}, 209 | }, 210 | }); 211 | 212 | designer.$on("onDesigned", (e) => { 213 | console.log(e); 214 | }); 215 | ``` 216 | 217 | ::: 218 | -------------------------------------------------------------------------------- /docs/sv-print/provider.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自定义默认拖拽元素 3 | category: 4 | - sv-print 5 | --- 6 | 7 | ### provider 作用 8 | 9 | ==provider==顾名思义就是==提供者==的意思,就是==提供默认【新】拖拽出来元素的默认大小、参数及样式。== 10 | 11 | 如果你是第一次使用,建议先阅读下列文章: 12 | 13 | 微信公众号文章: 14 | 15 | [如何自定义可拖拽元素 provider](https://mp.weixin.qq.com/s/n9i1j8hhVJvnlfJRPRtWog) 16 | 17 | [实战-动态 provider](https://mp.weixin.qq.com/s/UVkhul1tynjaUjdC_NaHfw) 18 | 19 | ### 创建 provider 20 | 21 | 站内教程:[入门 provider](../config/provider) 22 | 23 | 新建一个 provider.js 文件,编写你需要的默认元素及参数: 24 | 25 | @include(../config/provider.md{14-57}) 26 | 27 | ### 初始化 provider 28 | 29 | > 1 全局初始化 30 | 31 | 在 main.js 或者 其他非 UI 页面的 js 中初始化 provider: 做到全局初始化,所有页面都可以使用。 32 | 33 | ```js 34 | import { hiprint } from "sv-print"; 35 | // 自己本地建的 provider.js 36 | import provider from "./provider"; 37 | // 初始化 38 | hiprint.init({ 39 | providers: [new provider()], // 可以传多个 40 | }); 41 | ``` 42 | 43 | > 2 使用时初始化 44 | 45 | ```vue 46 | 50 | 51 | 71 | ``` 72 | 73 | ### 查看 已初始化的 provider 74 | 75 | 不知道初始化是否正常? 76 | 77 | 打开==浏览器控制台==,输入 hiprint 可查看 hiprint.ElementTypes 对象: 78 | 79 | ```js 80 | hiprint.ElementTypes 81 | ``` 82 | 83 | 84 | 85 | 其中 ==allElementTypes== 是已初始化的所有的元素。 86 | 87 | ==defaultModule== 则是根据你创建的 provider 的 key。 88 | 89 | 你可以==详细查看他们==,以检查是否==新拖拽出来的元素是否正常==。 以及关键的 ==tid== 。 90 | 91 | ### 使用 provider 92 | 93 | 本来不想啰嗦的,又怕你们不清楚,说找不到怎么用,不知道原理。还是简单说一下吧。 94 | 95 | > 1 自定义拖拽元素的样式 96 | 97 | ```vue 98 | 108 | 109 | 138 | ``` 139 | 140 | > 2 使用默认的样式渲染 141 | 142 | ```vue 143 | 147 | 148 | 175 | ``` 176 | 177 | ### Designer 组件使用 provider 178 | 179 | 通过上方的基础说明,我们知道有两种方式去构建使用 provider。 180 | 181 | - 方式 1: ==UI 定制化高、比较美观== 182 | - 方式 2: ==适合批量渲染元素== 183 | 184 | 在 sv-print 的 Designer 组件中, 同样可以使用两种方式去构建使用 provider。 185 | 186 | > 方式 1: 自定义渲染的样式 187 | 188 | ```vue 189 | 212 | 226 | ``` 227 | 228 | > 方式 2: 批量构建拖拽元素 229 | 230 | ```vue 231 | 248 | 257 | ``` 258 | -------------------------------------------------------------------------------- /docs/config/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 文本 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### 文本元素 8 | 9 | ::: tip 温馨提示 10 | 11 | 虽然这是 `文本` 元素,但是可通过 ==textType== 配置显示 ==条形码== 或 ==二维码==。 12 | 13 | ::: 14 | 15 | ```js 16 | // 面板中 添加一个文本 17 | panel.addPrintText({ options: { width: 100, height: 15, top: 20, left: 20, title: "手动添加的text", textAlign: "center" } }); 18 | // 面板中 添加一个条形码 19 | panel.addPrintText({ options: { width: 100, height: 40, top: 40, left: 20, title: "123456", textType: "barcode" } }); 20 | // 面板中 添加一个二维码 21 | panel.addPrintText({ options: { width: 100, height: 100, top: 80, left: 20, title: "123456", textType: "qrcode" } }); 22 | ``` 23 | 24 | ### printElementType 25 | 26 | ::: info 温馨提示 27 | 28 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 29 | 30 | ::: 31 | 32 | | 名称 | 类型 | 说明 | 备注 | 33 | | ---------- | ---------- | ----------------------------------------------------------------------------------- | ----------------------------------------- | 34 | | tid | `string` | 元素类型唯一标识 | | 35 | | title | `string` | 标题或内容
`同 options 的 title` | `拖拽时就显示`
==无法彻底删除== | 36 | | field | `string` | 字段名称
`同 options 的 field` | `优先级高于 options`
==无法彻底删除== | 37 | | data | `string` | 同==测试数据==但参数列表不会显示
`同 options 的 testData` ==需要先设置 field== | `优先级高于 options`
==无法彻底删除== | 38 | | formatter | `function` | 格式化函数
`同 options 的 formatter` | `优先级高于 options`
==无法彻底删除== | 39 | | styler | `function` | 样式函数
`同 options 的 styler` | `优先级高于 options`
==无法彻底删除== | 40 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 41 | 42 | ### options 43 | 44 | ::: info 温馨提示 45 | 46 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 47 | 48 | ::: 49 | 50 | | 名称 | 类型 | 说明 | 备注 | 51 | | -------------- | --------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 52 | | title | `string` | 标题或内容
`field 存在:title为标题,打印结果为 title:data , field 不存在:title为内容,打印结果为 title` | `拖拽进设计器时显示`
| 53 | | field | `string` | 字段名称 | 可配置==fields==让字段名变成下列选择 | 54 | | testData | `string` | 测试数据 ==需要先设置 field== | ==仅拖拽设计时有效== | 55 | | hideTitle | `boolean` | 隐藏标题 | | 56 | | fontFamily | `string` | 字体 `默认可继承面板设置的字体` | 默认`宋体` | 57 | | fontSize | `string` | 字体大小 | 默认`9pt` | 58 | | fontWeight | `string` | 字体粗细 | 默认`9pt` | 59 | | color | `string` | 字体样式 | | 60 | | letterSpacing | `string` | 字间距 | | 61 | | textDecoration | `string` | 文本修饰 | `下划线、删除线` | 62 | | textAlign | `string` | 对齐方式 | `left、center、right` | 63 | | lineHeight | `string` | 字体行高 ==条形码/二维码有影响== | | 64 | | textType | `string` | 文本类型 `barcode(条形码) qrcode(二维码)` | | 65 | | barcodeMode | `string` | 条形码类型 | | 66 | | qrcodeLevel | `string` | 二维码容错率 `{'L':1,'M':0,'Q':3,'H':2` | | 67 | | fixed | `string` | 位置固定 | `让不在页眉页脚范围内的元素拥有每页输出的特性。`
`与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。` | 68 | | showInPage | `string` | 显示规则 `仅页眉页尾元素或位置固定固定有效` ==none 不受影响== | ==none:始终隐藏==
`first:首页显示`
`odd:奇数页显示`
`even:偶数页显示`
`last:尾页显示`
| 69 | | axis | `string` | 拖拽方向 `v:竖向 h:横向` | ==按住 Shift 横向 拖动, Shift + Alt 竖向 拖动== | 70 | | transform | `number` | 旋转角度 | | 71 | | zIndex | `number` | 元素层级 | | 72 | | upperCase | `string` | 转大小写 | `hinnn.toUpperCase('7',10.8) // 壹拾元捌角零分` | 73 | -------------------------------------------------------------------------------- /docs/sv-print/options.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 参数&回调 3 | category: 4 | - sv-print 5 | --- 6 | 7 | ::: warning 温馨提示 8 | 9 | sv-print 它的配置和 API 还不够稳定。些许 Bug 可能还未发现或未处理。 10 | 11 | ::: 12 | 13 | ### 参数 14 | 15 | | 名称 | 类型 | 说明 | 默认值 | 备注 | 16 | | ---------------------- | ---------------------- | ------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------ | 17 | | autoConnect | `boolean` | 是否自动连接==打印客户端== | `undefined` | | 18 | | config | `object` | 配置 | `undefined` | `hiprint.setConfig` | 19 | | providers | `array` | provider 数组
`自定义可拖拽元素` | `[]` | | 20 | | providerMap | `object/array` | provider 构建对象/对象数组
`构建拖拽元素` | `undefined` | `{container:'容器选择器',value:'provider type(如:defaultModule)'}` | 21 | | clearProviderContainer | `boolean` | 构建 provider 之前是否先==清空== | `true` | | 22 | | showPanels | `boolean` | 是否显示多面板 | `true` | | 23 | | plugins | `array` | 插件数组 | `[]` | | 24 | | template | `json/object` | 模板 json/模板参数 | `{}` | `模板参数`: new 模板的参数 | 25 | | printData | `object` | 预览打印数据 | `{name:"abcd"}` | | 26 | | templateKey | `string` | 缓存键`(localStorage)` | `default-template` | | 27 | | title | `string` | 模板名称, 导出 pdf 名称 | `默认模板` | | 28 | | authKey | `string` | 授权 key `显示对应授权信息` | `` | | 29 | | headerLogoHtml | `string` | header logo `需authKey支持` | `` | | 30 | | headerTitle | `string` | header 标题 `需authKey支持` | `` | | 31 | | events | `object` | 事件回调 | `{}` | | 32 | | tags | `array` | 可拖拽元素 tags | `['.draggable-ele']` | | 33 | | styleOption | `object` | 样式 map / 小组件初始位置 | `{}` ==有默认值合并== | | 34 | | showOption | `object` | 显隐 map / 小组件是否显示 | `{}` ==有默认值合并== | | 35 | | paperList | `array` | 纸张列表 | `A1-A7 B1-B7` | `{ type: "A1", width: 594, height: 841 }` | 36 | | theme | `string` | 默认主题 | `light` | `` | 37 | | themeList | `array` | 可选主题列表 | `["light","dark",...]` | [daisyui](https://daisyui.com/docs/themes/) | 38 | | miniMapOriginMode | `boolean` | `小地图`原始模式 | `false` | | 39 | | previewOptions | `object` | `预览参数` | `{}` | `{showPdf:false}`
隐藏导出 pdf 按钮 | 40 | | onPreviewClick | `function` | `预览`点击函数 (e)=>{
return true; `阻止继续运行`} | `undefined` | | 41 | | onImageChooseClick | `function` | `图片选择`点击函数 (target)=>{} | `undefined` | | 42 | | onPanelAddClick | `function` | `多面板添加`点击函数 (panel, createPanel)=>{} | `undefined` | | 43 | | onFunctionClick | `function` | `格式化函数`点击函数 (option, printElement, event)=>{} | `undefined` | | 44 | 45 | ### 回调 46 | 47 | | 名称 | 说明 | 回调参数 | 48 | | ---------- | -------------------- | ------------------------------------------ | 49 | | onDesigned | `设计器`渲染完成回调 | {
`hiprint`
`designerUtils`
} | 50 | 51 | ### 默认值 52 | 53 | 如 `styleOption`、`showOption` 稍微复杂一点的参数。 54 | 55 | ```js 56 | // styleOption 57 | { 58 | draggableEls: { // 可拖拽元素 59 | mode: "default", // 拖拽模式: default(默认), top(上), bottom(下), left(左), right(右), fixed(固定) 60 | show: true, // 是否显示 默认: true 61 | html: '拖拽元素', // 缩放 左侧的 按钮/icon (一般不用) 62 | style: "left:20px;top:95px;width:200px;height:calc(100% - 340px);", // 样式 63 | }, 64 | options: { // 属性 65 | mode: "default", 66 | html: '属性', 67 | style: "right:0;top:95px;width:200px;", 68 | }, 69 | pageStructure: { // 页面结构 70 | mode: "default", 71 | html: '页面结构', 72 | style: "right:210px;top:95px;width:200px;", 73 | }, 74 | locationExchange: { // 位置交换 75 | mode: "default", 76 | show: false, 77 | html: '位置交换', 78 | style: "right:490px;top:95px;width:300px;height:400px", 79 | }, 80 | miniMap: { // 小地图 81 | mode: "default", 82 | html: '概览图', 83 | style: "left:20px;bottom:30px;width:240px;min-height:200px;height:200px", 84 | }, 85 | editableTools: { // 编辑工具 86 | mode: "top", 87 | style: "left:280px;top:180px;", 88 | }, 89 | zIndexTools: { // 层级工具 90 | mode: "top", 91 | style: "left:280px;top:300px;", 92 | }, 93 | fontTools: { // 字体工具 94 | mode: "top", 95 | style: "left:280px;top:420px;", 96 | }, 97 | zoomTools: { // 缩放工具 98 | mode: "left", 99 | style: "left:240px;top:100px;", 100 | }, 101 | rotateTools: { // 旋转工具 102 | mode: "bottom", 103 | style: "left:440px;top:180px;", 104 | }, 105 | } 106 | // showOption 107 | // 这个目前 有bug, 高度显示不正常, 有时间再修复 108 | { 109 | showHeader: true, // 是否显示头部 110 | showToolbar: true, // 是否显示工具栏 111 | showFooter: true, // 是否显示底部 需要 authKey 支持 112 | showPower: true, // 是否显示 "powered by sv-print" 需要 authKey 支持 113 | } 114 | ``` 115 | -------------------------------------------------------------------------------- /docs/slides.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 幻灯片演示 3 | icon: slides 4 | layout: Slide 5 | --- 6 | 7 | 8 | 9 | @slidestart 10 | 11 | 12 | 13 | ## 幻灯片演示 14 | 15 | 16 | 17 | 一个简单的幻灯片演示与各种小贴士。 18 | 19 | 20 | 21 | > 作者 Mr.Hope. 请滚动鼠标滚轮进入下一页 22 | 23 | --- 24 | 25 | ## 标注幻灯片 26 | 27 | 28 | 29 | [👇](#/1/1) 30 | 31 | -- 32 | 33 | ## 标注幻灯片 34 | 35 | 36 | 37 | 使用 `---` 标注水平幻灯片 38 | 39 | 40 | 41 | 在水平幻灯片中使用 `--` 分割垂直幻灯片 42 | 43 | 44 | 45 | 使用 `` 在幻灯片上添加属性 46 | 47 | 48 | 49 | 使用 `` 在前一个 HTML 元素上添加属性 50 | 51 | 52 | 53 | --- 54 | 55 | 56 | 57 | ## Markdown 58 | 59 | 60 | 61 | 你可以在幻灯片中使用 Markdown 语法的各种标记. 62 | 63 | 64 | 65 | -- 66 | 67 | 68 | 69 | ## Markdown 70 | 71 | 你可以在幻灯片中使用 Markdown 语法的各种标记. 72 | 73 | ### 这是一个 H3 74 | 75 | 标题默认会自动转换为大写。 76 | 77 | 这是一个有着 **粗体**, _斜体_, ~~删除线~~ 文字并包含 [一个链接](https://mrhope.site) 的段落,并且它会自动换行。所以你无需担心它的长度。 78 | 79 | -- 80 | 81 | 82 | 83 | ## Markdown 84 | 85 | 你可以在幻灯片中使用 Markdown 语法的各种标记. 86 | 87 | 列表默认为 `inline-block` 88 | 89 | - 项目 90 | - 项目 91 | - 项目 92 | 93 | 1. 项目 1 94 | 1. 项目 2 95 | 1. 项目 3 96 | 97 | -- 98 | 99 | 100 | 101 | ## Markdown 102 | 103 | 你可以在幻灯片中使用 Markdown 语法的各种标记. 104 | 105 | 在你启用 `highlight` 插件后,代码块会自动高亮。 106 | 107 | ```js 108 | const a = 1; 109 | ``` 110 | 111 | -- 112 | 113 | 114 | 115 | ## Markdown 116 | 117 | 你可以在幻灯片中使用 Markdown 语法的各种标记. 118 | 119 | 在你启用 `math` 插件后,你也可以使用 TEX 格式使用数学公式。 120 | 121 | $$ 122 | J(\theta_0,\theta_1) = \sum_{i=0} 123 | $$ 124 | 125 | -- 126 | 127 | 128 | 129 | ## Markdown 130 | 131 | 你可以在幻灯片中使用 Markdown 语法的各种标记. 132 | 133 | ⚠**请注意**: 表格和分割线,以及所有不在 Markdown 标准语法中的内容均不受支持。 134 | 135 | --- 136 | 137 | 138 | 139 | ## 布局 140 | 141 | 142 | 143 | -- 144 | 145 | 146 | 147 | ## 布局 148 | 149 | 150 | 151 | 👆 `r-fit-text` class 会让文字在不超出幻灯片范围的情况下尽可能大。 152 | 153 | -- 154 | 155 | 156 | 157 | ## 布局 158 | 159 | ![Logo](/logo.svg) 160 | 161 | 162 | 163 | 👆 `r-stretch` class 帮助你控制注入图片或视频的大小,使它们填充满幻灯片垂直方向上的剩余空间。 164 | 165 | -- 166 | 167 | 168 | 169 | ## 布局 170 | 171 | ### 背景 172 | 173 | 你可以通过向特定幻灯片添加 `data-background` 属性自定义幻灯片背景. 174 | 175 | --- 176 | 177 | 178 | 179 | ## 动画片段 180 | 181 | 182 | 183 | -- 184 | 185 | 186 | 187 | ## 动画片段 188 | 189 | 190 | 191 | 动画片段用于高亮或显隐幻灯片中的元素。 192 | 193 | 你需要在元素上添加 `fragment` 和动画 class。 194 | 195 | -- 196 | 197 | 198 | 199 | ## 动画片段 200 | 201 | ### 动画 class 202 | 203 | - `fade-in` 204 | 205 | 206 | - `fade-out` 207 | 208 | 209 | - `fade-up` 210 | 211 | 212 | 213 | 214 | - `fade-down` 215 | 216 | 217 | - `fade-left` 218 | 219 | 220 | - `fade-right` 221 | 222 | 223 | 224 | 225 | - `fade-in-then-out` 226 | 227 | 228 | - `fade-in-then-semi-out` 229 | 230 | 231 | -- 232 | 233 | 234 | 235 | ## 动画片段 236 | 237 | ### 动画 class 238 | 239 | - `grow` 240 | 241 | 242 | - `shrink` 243 | 244 | 245 | - `strike` 246 | 247 | 248 | 249 | 250 | - `highlight-red` 251 | 252 | 253 | - `highlight-green` 254 | 255 | 256 | - `highlight-blue` 257 | 258 | 259 | 260 | 261 | - `highlight-current-red` 262 | 263 | 264 | - `highlight-current-green` 265 | 266 | 267 | - `highlight-current-blue` 268 | 269 | 270 | -- 271 | 272 | 273 | 274 | ## 动画片段 275 | 276 | ### 多个动画片段 277 | 278 | 你可以按照顺序包裹一个 HTML 元素使其拥有多个动画片段 279 | 280 | 281 | 282 | 283 | 渐入 > 变红 > 渐出 284 | 285 | 286 | 287 | 288 | -- 289 | 290 | 291 | 292 | ## 动画片段 293 | 294 | ### 顺序 295 | 296 | 你可以使用 `data-fragment-index` 属性改变元素的动画顺序。 297 | 298 | 不同元素可以有相同的动画顺序。 299 | 300 | - 最后显示 301 | 302 | 303 | - 第二个显示 304 | 305 | 306 | 307 | 308 | - 第一个显示 309 | 310 | 311 | - 第二个显示 312 | 313 | 314 | --- 315 | 316 | 317 | 318 | ## 渐变 319 | 320 | 321 | 322 | -- 323 | 324 | 325 | 326 | ## 渐变 327 | 328 | 329 | 330 | Transition 可以通过配置中的 `transition` 选项全局设置,也可以通过在特定幻灯片添加 `data-transition` 属性局部设置. 331 | 332 | 可能的值: 333 | 334 | - none 335 | - fade 336 | - slide 337 | 338 | 339 | 340 | - convex 341 | - concave 342 | - zoom 343 | 344 | -- 345 | 346 | 347 | 348 | ## 渐变 349 | 350 | 351 | 352 | ### 过渡动画 353 | 354 | 你可以在相邻的幻灯片上添加 `data-auto-animate` 使相同的 HTML 元素产生过渡动画效果。 355 | 356 | --- 357 | 358 | 359 | 360 | ## 功能 361 | 362 | 363 | 364 | -- 365 | 366 | 367 | 368 | ## 功能 369 | 370 | 371 | 372 | ### 代码 373 | 374 | 通过启用 `highlight` 插件,你可以对代码块进行高亮。 375 | 376 | 你可以使用 `[a-b|c-d]` 语法来分布高亮特定行。 377 | 378 | ```js [1-2|3|4] 379 | let a = 1; 380 | let b = 2; 381 | let c = (x) => 1 + 2 + x; 382 | c(3); 383 | ``` 384 | 385 | -- 386 | 387 | 388 | 389 | ## 功能 390 | 391 | 392 | 393 | ### 预览模式 394 | 395 | 按下 `Esc` 或 `O` 即可在幻灯片获得焦点时进入预览模式。 396 | 397 | -- 398 | 399 | 400 | 401 | ## 功能 402 | 403 | 404 | 405 | ### 全屏模式 406 | 407 | 按下 `F` 或 `F11` 即可在幻灯片获得焦点时进入全屏模式。 408 | 409 | -- 410 | 411 | 412 | 413 | ## 功能 414 | 415 | 416 | 417 | ### 缩放 418 | 419 | 按下 `alt` (Linux 上使用 `ctrl`) 的同时点击幻灯片的任何元素,即可以向此元素进行放大。 420 | 421 | 再次点击即可缩小。 422 | 423 | --- 424 | 425 | 426 | 427 | ## 结束 428 | 429 | @slideend 430 | -------------------------------------------------------------------------------- /docs/guide/markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown 展示 3 | icon: markdown 4 | order: 2 5 | category: 6 | - 使用指南 7 | tag: 8 | - Markdown 9 | --- 10 | 11 | VuePress 主要从 Markdown 文件生成页面。因此,你可以使用它轻松生成文档或博客站点。 12 | 13 | 你应该创建和编写 Markdown 文件,以便 VuePress 可以根据文件结构将它们转换为不同的页面。 14 | 15 | 16 | 17 | ## Markdown 介绍 18 | 19 | 如果你是一个新手,还不会编写 Markdown,请先阅读 [Markdown 介绍](https://vuepress-theme-hope.github.io/v2/zh/cookbook/markdown/) 和 [Markdown 演示](https://vuepress-theme-hope.github.io/v2/zh/cookbook/markdown/demo.html)。 20 | 21 | ## Markdown 配置 22 | 23 | VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。 24 | 25 | ::: info 26 | 27 | Frontmatter 是 VuePress 中很重要的一个概念,如果你不了解它,你需要阅读 [Frontmatter 介绍](https://vuepress-theme-hope.github.io/v2/zh/cookbook/vuepress/page.html#front-matter)。 28 | 29 | ::: 30 | 31 | ## Markdown 扩展 32 | 33 | VuePress 会使用 [markdown-it](https://github.com/markdown-it/markdown-it) 来解析 Markdown 内容,因此可以借助于 markdown-it 插件来实现 [语法扩展](https://github.com/markdown-it/markdown-it#syntax-extensions) 。 34 | 35 | ### VuePress 扩展 36 | 37 | 为了丰富文档写作,VuePress 对 Markdown 语法进行了扩展。 38 | 39 | 关于这些扩展,请阅读 [VuePress 中的 Markdown 扩展](https://vuepress-theme-hope.github.io/v2/zh/cookbook/vuepress/markdown.html)。 40 | 41 | ### 主题扩展 42 | 43 | 通过 [`vuepress-plugin-md-enhance`][md-enhance],主题扩展了更多 Markdown 语法,提供更加丰富的写作功能。 44 | 45 | #### 自定义容器 46 | 47 | ::: v-pre 48 | 49 | 安全的在 Markdown 中使用 {{ variable }}。 50 | 51 | ::: 52 | 53 | ::: info 自定义标题 54 | 55 | 信息容器,包含 `代码` 与 [链接](#自定义容器)。 56 | 57 | ```js 58 | const a = 1; 59 | ``` 60 | 61 | ::: 62 | 63 | ::: tip 自定义标题 64 | 65 | 提示容器 66 | 67 | ::: 68 | 69 | ::: warning 自定义标题 70 | 71 | 警告容器 72 | 73 | ::: 74 | 75 | ::: danger 自定义标题 76 | 77 | 危险容器 78 | 79 | ::: 80 | 81 | ::: details 自定义标题 82 | 83 | 详情容器 84 | 85 | ::: 86 | 87 | :::: details 代码 88 | 89 | ```md 90 | ::: v-pre 91 | 92 | 安全的在 Markdown 中使用 {{ variable }}。 93 | 94 | ::: 95 | 96 | ::: info 自定义标题 97 | 98 | 信息容器 99 | 100 | ::: 101 | 102 | ::: tip 自定义标题 103 | 104 | 提示容器 105 | 106 | ::: 107 | 108 | ::: warning 自定义标题 109 | 110 | 警告容器 111 | 112 | ::: 113 | 114 | ::: danger 自定义标题 115 | 116 | 危险容器 117 | 118 | ::: 119 | 120 | ::: details 自定义标题 121 | 122 | 详情容器 123 | 124 | ::: 125 | ``` 126 | 127 | :::: 128 | 129 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/container.html) 130 | 131 | #### 代码块 132 | 133 | ::: code-tabs 134 | 135 | @tab pnpm 136 | 137 | ```bash 138 | pnpm add -D vuepress-theme-hope 139 | ``` 140 | 141 | @tab yarn 142 | 143 | ```bash 144 | yarn add -D vuepress-theme-hope 145 | ``` 146 | 147 | @tab:active npm 148 | 149 | ```bash 150 | npm i -D vuepress-theme-hope 151 | ``` 152 | 153 | ::: 154 | 155 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/code-tabs.html) 156 | 157 | #### 上下角标 158 | 159 | 19^th^ H~2~O 160 | 161 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/sup-sub.html) 162 | 163 | #### 自定义对齐 164 | 165 | ::: center 166 | 167 | 我是居中的 168 | 169 | ::: 170 | 171 | ::: right 172 | 173 | 我在右对齐 174 | 175 | ::: 176 | 177 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/align.html) 178 | 179 | #### Attrs 180 | 181 | 一个拥有 ID 的 **单次**{#word}。 182 | 183 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/attrs.html) 184 | 185 | #### 脚注 186 | 187 | 此文字有脚注[^first]. 188 | 189 | [^first]: 这是脚注内容 190 | 191 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/footnote.html) 192 | 193 | #### 标记 194 | 195 | 你可以标记 ==重要的内容== 。 196 | 197 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/mark.html) 198 | 199 | #### 任务列表 200 | 201 | - [x] 计划 1 202 | - [ ] 计划 2 203 | 204 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/tasklist.html) 205 | 206 | ### 图片增强 207 | 208 | 支持为图片设置颜色模式和大小 209 | 210 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/image.html) 211 | 212 | #### 图表 213 | 214 | ::: chart 一个散点图案例 215 | 216 | ```json 217 | { 218 | "type": "scatter", 219 | "data": { 220 | "datasets": [ 221 | { 222 | "label": "散点数据集", 223 | "data": [ 224 | { "x": -10, "y": 0 }, 225 | { "x": 0, "y": 10 }, 226 | { "x": 10, "y": 5 }, 227 | { "x": 0.5, "y": 5.5 } 228 | ], 229 | "backgroundColor": "rgb(255, 99, 132)" 230 | } 231 | ] 232 | }, 233 | "options": { 234 | "scales": { 235 | "x": { 236 | "type": "linear", 237 | "position": "bottom" 238 | } 239 | } 240 | } 241 | } 242 | ``` 243 | 244 | ::: 245 | 246 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/chart.html) 247 | 248 | #### Echarts 249 | 250 | ::: echarts 一个折线图案例 251 | 252 | ```json 253 | { 254 | "xAxis": { 255 | "type": "category", 256 | "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] 257 | }, 258 | "yAxis": { 259 | "type": "value" 260 | }, 261 | "series": [ 262 | { 263 | "data": [150, 230, 224, 218, 135, 147, 260], 264 | "type": "line" 265 | } 266 | ] 267 | } 268 | ``` 269 | 270 | ::: 271 | 272 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/echarts.html) 273 | 274 | #### 流程图 275 | 276 | ```flow 277 | cond=>condition: 是否执行操作? 278 | process=>operation: 操作 279 | e=>end: 结束 280 | 281 | cond(yes)->process->e 282 | cond(no)->e 283 | ``` 284 | 285 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/flowchart.html) 286 | 287 | #### Mermaid 288 | 289 | ```mermaid 290 | flowchart TB 291 | c1-->a2 292 | subgraph one 293 | a1-->a2 294 | end 295 | subgraph two 296 | b1-->b2 297 | end 298 | subgraph three 299 | c1-->c2 300 | end 301 | one --> two 302 | three --> two 303 | two --> c2 304 | ``` 305 | 306 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/mermaid.html) 307 | 308 | #### Tex 语法 309 | 310 | $$ 311 | \frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) 312 | = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\} 313 | $$ 314 | 315 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/tex.html) 316 | 317 | #### 导入文件 318 | 319 | @include(./README.md{11-17}) 320 | 321 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/include.html) 322 | 323 | #### 代码演示 324 | 325 | ::: normal-demo 一个普通 Demo 326 | 327 | ```html 328 |

VuePress Theme Hope

329 |

非常强大!

330 | ``` 331 | 332 | ```js 333 | document.querySelector("#very").addEventListener("click", () => { 334 | alert("非常强大"); 335 | }); 336 | ``` 337 | 338 | ```css 339 | span { 340 | color: red; 341 | } 342 | ``` 343 | 344 | ::: 345 | 346 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/demo.html) 347 | 348 | #### 样式化 349 | 350 | 向 Mr.Hope 捐赠一杯咖啡。 _Recommanded_ 351 | 352 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/stylize.html) 353 | 354 | #### 交互演示 355 | 356 | ::: playground#ts TS 案例 357 | 358 | @file index.ts 359 | 360 | ```ts 361 | const msg = "hello world"; 362 | 363 | const speak = (msg: string) => console.log(msg); 364 | 365 | speak(msg); 366 | ``` 367 | 368 | ::: 369 | 370 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/playground.html) 371 | 372 | #### Vue 交互演示 373 | 374 | ::: vue-playground Vue 交互演示 375 | 376 | @file App.vue 377 | 378 | ```vue 379 | 384 | 385 | 389 | ``` 390 | 391 | ::: 392 | 393 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/vue-playground.html) 394 | 395 | #### 幻灯片 396 | 397 | @slidestart 398 | 399 | ## 幻灯片 1 400 | 401 | 一个有文字和 [链接](https://mrhope.site) 的段落 402 | 403 | --- 404 | 405 | ## 幻灯片 2 406 | 407 | - 项目 1 408 | - 项目 2 409 | 410 | --- 411 | 412 | ## 幻灯片 3.1 413 | 414 | ```js 415 | const a = 1; 416 | ``` 417 | 418 | -- 419 | 420 | ## 幻灯片 3.2 421 | 422 | $$ 423 | J(\theta_0,\theta_1) = \sum_{i=0} 424 | $$ 425 | 426 | @slideend 427 | 428 | - [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/presentation.html) 429 | 430 | [md-enhance]: https://vuepress-theme-hope.github.io/v2/md-enhance/zh/ 431 | -------------------------------------------------------------------------------- /docs/guide/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 优化概览 3 | category: 4 | - 使用指南 5 | --- 6 | 7 | ::: tip 注意 8 | 9 | 截止 2022-12-26 [vue-plugin-hiprint](https://gitee.com/CcSimple/vue-plugin-hiprint) 0.0.40 所有更新相关内容。 10 | 11 | [hiprint](http://hiprint.io)官网提供的 2.5.4 版本中均不支持下列内容。 12 | 13 | ::: 14 | 15 | ### 编辑相关 16 | 17 | | 优化功能 | 说明 | 备注 | 18 | | --------------------------- | --------------------------------------------- | ------------------------------------------- | 19 | | backSpace / delete 删除元素 | 需要先选中元素 | ==vue-plugin-hiprint==不支持框选删除 | 20 | | 限制拖拽"边界" | 让元素不可脱出纸张外 | 可按住 Ctrl / Command 任意拖拽 | 21 | | "多选"元素 | 按住 Ctrl / Command 点击元素 | 可键盘方向键 / 鼠标拖动 移动、删除 | 22 | | "框选"元素 | 支持从容易角度开始框选 | ==框选后按住不动存在位置问题== | 23 | | "复制" / "粘贴" | 基本元素的 Ctrl / Command + C / V(复制/粘贴) | ==不支持 table== | 24 | | "撤销" / "重做" | Ctrl / Command + (Shift) + Z | | 25 | | 拖拽、跳动、辅助线 | 设置旋转角度后 辅助线显示不正常 | | 26 | | "旋转"控制点 | 拖拽旋转、双击还原 | | 27 | | "缩放"纸张 | 放大 / 缩小 拖动不乱跳 | | 28 | | 禁止元素"拖拽" | 锁定元素不可被拖拽 | | 29 | | 显示元素"坐标位置" | | | 30 | | 显示元素"宽高大小" | | 支持重写样式(.resize-panel .size-box) | 31 | | 美化/自定义显示拖拽"控制点" | | ==vue-plugin-hiprint==不支持 | 32 | | 拖拽等比调整大小 | "条形码" / "二维码" / "图片" | 可按住 Shift 自由调整大学 | 33 | | 元素"对齐" | 需要先选中多个元素 | | 34 | | 元素"间距" | 需要先选中多个元素 | | 35 | | 元素"参数" | 需要先选中多个元素 | 同时设置多个元素的"字体大小"等 | 36 | | 表格"列宽"拖拽调整 | 修复 bug | | 37 | | "拖动方向" | 指定方向拖动 | 按住 Shift 横向 拖动, Shift + Alt 竖向 拖动 | 38 | | 元素"吸附对齐" | 根据附近元素 上、下、左、右、中线位置吸附对齐 | 可按住 Ctrl / Command 拖拽取消吸附对齐 | 39 | | 文本/长文 "双击编辑" | | | 40 | | 元素右键菜单 | 根据选中的元素 弹出对应右键菜单 | ==sv-print== | 41 | 42 | ### 功能相关 43 | 44 | | 优化功能 | 说明 | 备注 | 45 | | -------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------- | 46 | | 修改直接"打印客户端"主机 | `hiprint.hiwebSocket.setHost("xxx:17521")` | 链接本机或局域网主机 | 47 | | table 可设置"双击"选择列字段 | options 中 配置 fields | 同元素 fields 例如:[{"text":'姓名',"field":'name'}] | 48 | | table 可编辑(移除原有 tableCustom) | 实现 tableCustom 的编辑,插入等功能 | | 49 | | table "表头" 显示模式 | 每页显示、首页显示、不显示 | | 50 | | table "字段类型" | 可设置表格显示 图片、条形码、二维码 | 可设置高度 | 51 | | table "聚合函数" | 表格底部显示 计数、合计、平均值、最大值、最小值 | 可自定义内容、隐藏标题 | 52 | | "条形码"部分格式修复 | EAN-13、EAN-8、ITF、UPC 等 | | 53 | | "字段名"支持嵌套形式 | 例如: a.b.c.d | ==不支持 a[0].b== | 54 | | 支持"不分页" | 适用 小票打印 | 让 table / longText 不分页 | 55 | | "不自动连接"打印客户端 | 不使用 "直接打印"功能 | disAutoConnect / autoConnect 不自动/自动连接 | 56 | | "qrcode.js" vite 支持 | vite 项目 二维码可正常使用 | | 57 | | "参数面板" 可设置 "宽高大小" | 支持 同步/不同步 编辑 | | 58 | | 动态显示/隐藏 table "列" | 同时 getJson 返回 相关列 | | 59 | | 通过"tid"获取"拖拽元素"/更新"拖拽元素" | 动态更新左侧拖拽元素 | `hiprint.updateElementType(tid,(e)=>e)` | 60 | | 元素"不打印"功能 | options 中 配置 `showInPage: 'none'` | | 61 | | 刷新获取"打印机列表" | `hiprint.refreshPrinterList(list)=>{})` | 需已连接"直接打印客户端" | 62 | | 获取"MAC 地址""IP 地址" | `hiprint.getAddress('mac',(data)=>{})` | 需已连接"直接打印客户端" | 63 | | 图片元素"选择"功能 | new PrintTemplate 时 指定 `onImageChooseClick: (target) => {target.refresh('url',{})}` 更新图片地址 | 支持根据图片 宽 / 高 比例调整图片元素 | 64 | | 图片元素"缩放格式"功能 | object-fix: fill/contain/cover/none | | 65 | | "纸张面板"参数显示/隐藏 | 点击纸张空白处的一些参数 如: 首页页尾、偶数页页尾 | | 66 | | "横线/竖线"格式 | 虚线 -> 长虚线、短虚线 | | 67 | | 自定义可选"字体列表" | new PrintTemplate 时 指定 fontList: [{title:'宋体',value:'SimSun'}] | 需要本机支持的字体 | 68 | | 二维码"容错率"配置 | options 中 qrcodeLevel: 1 | `{'L':1,'M':0,'Q':3,'H':2` | 69 | | 自定义"参数" | hiprint.setConfig 配置 optionItems | | 70 | | 自定义"参数" | hiprint.setConfig 配置 optionItems | | 71 | | 打印预览"页码"可拖拽问题修复 | bug | | 72 | | 新增"强制分页"功能 | 强制让当前元素在下一页开始显示(它之后的元素也会跟上它) | | 73 | | table "聚合函数" 小数位 | 自定义小数位数 0/1/2/3/4/5/6 | | 74 | | table "聚合函数" 对齐方式 | 自定义对齐方式 left/center/right | | 75 | | table "聚合函数" 自定义文本 | 自定义文本 | | 76 | | table "聚合函数" 数字转大写 | 同时提供 `hinnn.toUpperCase('7',10.8) // 壹拾元捌角零分` | | 77 | | table "列自定义" 功能 | 自定义 表格 列 渲染函数 | | 78 | -------------------------------------------------------------------------------- /docs/en/slides.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Slide page 3 | icon: slides 4 | layout: Slide 5 | --- 6 | 7 | 8 | 9 | @slidestart 10 | 11 | 12 | 13 | ## Slide Demo 14 | 15 | 16 | 17 | A simple slide demo and useful hints. 18 | 19 | 20 | 21 | > By Mr.Hope. Please scroll mousewheel down to the next slide 22 | 23 | --- 24 | 25 | 26 | 27 | ## Marking Slides 28 | 29 | 30 | 31 | [👇](#/1/1) 32 | 33 | -- 34 | 35 | 36 | 37 | ## Marking Slides 38 | 39 | 40 | 41 | Use `---` to mark horizontal slides 42 | 43 | 44 | 45 | Use `--` to sperate vertical slides in a horizontal slide. 46 | 47 | 48 | 49 | Use `` to add attributes to slide 50 | 51 | 52 | 53 | Use `` to add attributes to the previous html element 54 | 55 | 56 | 57 | --- 58 | 59 | 60 | 61 | ## Markdown 62 | 63 | 64 | 65 | You can use all kinds of markup in slides. 66 | 67 | 68 | 69 | -- 70 | 71 | 72 | 73 | ## Markdown 74 | 75 | You can use all kinds of markup in slides. 76 | 77 | ### This is a H3 78 | 79 | Headings will transform to UPPERCASE by default. 80 | 81 | Here is paragraph with some **bold**, _italic_, ~~strikethrough~~ text and a [link](https://mrhope.site), and it can auto break itself so you don’t need to worry the length. 82 | 83 | -- 84 | 85 | 86 | 87 | ## Markdown 88 | 89 | You can use all kinds of markup in slides. 90 | 91 | List is `inline-block` by default. 92 | 93 | - Item 94 | - Item 95 | - Item 96 | 97 | 1. Item 1 98 | 1. Item 2 99 | 1. Item 3 100 | 101 | -- 102 | 103 | 104 | 105 | ## Markdown 106 | 107 | You can use all kinds of markup in slides. 108 | 109 | Code block will get auto highlight if you enable `highlight` plugin. 110 | 111 | ```js 112 | const a = 1; 113 | ``` 114 | 115 | -- 116 | 117 | 118 | 119 | ## Markdown 120 | 121 | You can use all kinds of markup in slides. 122 | 123 | You can also write math equation using tex syntax if you enable `math` plugin. 124 | 125 | $$ 126 | J(\theta_0,\theta_1) = \sum_{i=0} 127 | $$ 128 | 129 | -- 130 | 131 | 132 | 133 | ## Markdown 134 | 135 | You can use all kinds of markup in slides. 136 | 137 | ⚠**Note**: Table, hr and other nonstandard Markdown syntax is not supported. 138 | 139 | --- 140 | 141 | 142 | 143 | ## Layout 144 | 145 | 146 | 147 | -- 148 | 149 | 150 | 151 | ## Layout 152 | 153 | 154 | 155 | 👆 The `r-fit-text` class makes text as large as possible without overflowing the slide. 156 | 157 | -- 158 | 159 | 160 | 161 | ## Layout 162 | 163 | ![Logo](/logo.svg) 164 | 165 | 166 | 167 | 👆 The `r-stretch` class helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide. 168 | 169 | -- 170 | 171 | 172 | 173 | ## Layout 174 | 175 | ### Background 176 | 177 | Cutom background by adding `data-background` attribute to slide. 178 | 179 | --- 180 | 181 | 182 | 183 | ## Fragment 184 | 185 | 186 | 187 | -- 188 | 189 | 190 | 191 | ## Fragment 192 | 193 | 194 | 195 | Fragments are used to highlight or incrementally reveal individual elements on a slide. 196 | 197 | Add `fragment` and animation class to element. 198 | 199 | -- 200 | 201 | 202 | 203 | ## Fragment 204 | 205 | ### Animation class 206 | 207 | - `fade-in` 208 | 209 | 210 | - `fade-out` 211 | 212 | 213 | - `fade-up` 214 | 215 | 216 | 217 | 218 | - `fade-down` 219 | 220 | 221 | - `fade-left` 222 | 223 | 224 | - `fade-right` 225 | 226 | 227 | 228 | 229 | - `fade-in-then-out` 230 | 231 | 232 | - `fade-in-then-semi-out` 233 | 234 | 235 | -- 236 | 237 | 238 | 239 | ## Fragment 240 | 241 | ### Animation class 242 | 243 | - `grow` 244 | 245 | 246 | - `shrink` 247 | 248 | 249 | - `strike` 250 | 251 | 252 | 253 | 254 | - `highlight-red` 255 | 256 | 257 | - `highlight-green` 258 | 259 | 260 | - `highlight-blue` 261 | 262 | 263 | 264 | 265 | - `highlight-current-red` 266 | 267 | 268 | - `highlight-current-green` 269 | 270 | 271 | - `highlight-current-blue` 272 | 273 | 274 | -- 275 | 276 | 277 | 278 | ## Fragment 279 | 280 | ### Mutiple fragments 281 | 282 | Multiple fragments can be applied to the same element sequentially by wrapping it 283 | 284 | 285 | 286 | 287 | Fade in > Turn red > Fade out 288 | 289 | 290 | 291 | 292 | -- 293 | 294 | 295 | 296 | ## Fragment 297 | 298 | ### Order 299 | 300 | Order can be changed using the `data-fragment-index` attribute. 301 | 302 | Multiple elements can appear at the same index. 303 | 304 | - Appears last 305 | 306 | 307 | - Appears second 308 | 309 | 310 | 311 | 312 | - Appears first 313 | 314 | 315 | - Appears second 316 | 317 | 318 | --- 319 | 320 | 321 | 322 | ## Transition 323 | 324 | 325 | 326 | -- 327 | 328 | 329 | 330 | ## Transition 331 | 332 | 333 | 334 | Transition can be changed by setting the `transition` config option globally or `data-transition` attribute on specific slide. 335 | 336 | Possible values: 337 | 338 | - none 339 | - fade 340 | - slide 341 | 342 | 343 | 344 | - convex 345 | - concave 346 | - zoom 347 | 348 | -- 349 | 350 | 351 | 352 | ## Transition 353 | 354 | 355 | 356 | ### Auto animate 357 | 358 | `data-auto-animate` can be added on nearby slides to make an animation on unchanged elements. 359 | 360 | --- 361 | 362 | 363 | 364 | ## Functions 365 | 366 | 367 | 368 | -- 369 | 370 | 371 | 372 | ## Functions 373 | 374 | 375 | 376 | ### Code 377 | 378 | By enabling `highlight` plugin, you can highlight code blocks. 379 | 380 | You can use `[a-b|c-d]` syntax to highlight lines by steps. 381 | 382 | ```js [1-2|3|4] 383 | let a = 1; 384 | let b = 2; 385 | let c = (x) => 1 + 2 + x; 386 | c(3); 387 | ``` 388 | 389 | -- 390 | 391 | 392 | 393 | ## Functions 394 | 395 | 396 | 397 | ### Overview 398 | 399 | Press `Esc` or `O` to enter overview mode when the presentation is active 400 | 401 | -- 402 | 403 | 404 | 405 | ## Functions 406 | 407 | 408 | 409 | ### Full Screen 410 | 411 | Press `F` or `F11` to enter fullscreen when the presentation is active 412 | 413 | -- 414 | 415 | 416 | 417 | ## Functions 418 | 419 | 420 | 421 | ### Zoom 422 | 423 | Hold down the `alt` key (`ctrl` in Linux) and click on any element to zoom towards it. 424 | 425 | Click again to zoom back out. 426 | 427 | --- 428 | 429 | 430 | 431 | ## The End 432 | 433 | @slideend 434 | -------------------------------------------------------------------------------- /docs/en/guide/markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown Enhance 3 | icon: markdown 4 | order: 2 5 | category: 6 | - Guide 7 | tag: 8 | - Markdown 9 | --- 10 | 11 | VuePress basically generate pages from Markdown files. So you can use it to generate documentation or blog sites easily. 12 | 13 | You should create and write Markdown files, so that VuePress can convert them to different pages according to file structure. 14 | 15 | 16 | 17 | ## Markdown Introduction 18 | 19 | If you are a new learner and don’t know how to write Markdown, please read [Markdown Intro](https://vuepress-theme-hope.github.io/v2/cookbook/markdown/) and [Markdown Demo](https://vuepress-theme-hope.github.io/v2/cookbook/markdown/demo.html). 20 | 21 | ## Markdown Config 22 | 23 | VuePress introduce configuration for each markdown page using Frontmatter. 24 | 25 | ::: info 26 | 27 | Frontmatter is a important concept in VuePress. If you don’t know it, you need to read [Frontmatter Introduction](https://vuepress-theme-hope.github.io/v2/cookbook/vuepress/page.html#front-matter). 28 | 29 | ::: 30 | 31 | ## Markdown Extension 32 | 33 | The Markdown content in VuePress will be parsed by [markdown-it](https://github.com/markdown-it/markdown-it), which supports [syntax extensions](https://github.com/markdown-it/markdown-it#syntax-extensions) via markdown-it plugins. 34 | 35 | ### VuePress Enhancement 36 | 37 | To enrich document writing, VuePress has extended Markdown syntax. 38 | 39 | For these extensions, please read [Markdown extensions in VuePress](https://vuepress-theme-hope.github.io/v2/basic/vuepress/markdown.html). 40 | 41 | ### Theme Enhancement 42 | 43 | By using [`vuepress-plugin-md-enhance`][md-enhance], the theme extends more Markdown syntax and provides richer writing functions. 44 | 45 | #### Custom Container 46 | 47 | ::: v-pre 48 | 49 | Safely use {{ variable }} in Markdown. 50 | 51 | ::: 52 | 53 | ::: info Custom Title 54 | 55 | A custom information container with `code`, [link](#custom-container). 56 | 57 | ```js 58 | const a = 1; 59 | ``` 60 | 61 | ::: 62 | 63 | ::: tip Custom Title 64 | 65 | A custom tip container 66 | 67 | ::: 68 | 69 | ::: warning Custom Title 70 | 71 | A custom warning container 72 | 73 | ::: 74 | 75 | ::: danger Custom Title 76 | 77 | A custom danger container 78 | 79 | ::: 80 | 81 | ::: details Custom Title 82 | 83 | A custom details container 84 | 85 | ::: 86 | 87 | :::: details Code 88 | 89 | ```md 90 | ::: v-pre 91 | 92 | Safely use {{ variable }} in Markdown. 93 | 94 | ::: 95 | 96 | ::: info Custom Title 97 | 98 | A custom information container 99 | 100 | ::: 101 | 102 | ::: tip Custom Title 103 | 104 | A custom tip container 105 | 106 | ::: 107 | 108 | ::: warning Custom Title 109 | 110 | A custom warning container 111 | 112 | ::: 113 | 114 | ::: danger Custom Title 115 | 116 | A custom danger container 117 | 118 | ::: 119 | 120 | ::: details Custom Title 121 | 122 | A custom details container 123 | 124 | ::: 125 | ``` 126 | 127 | :::: 128 | 129 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/container.html) 130 | 131 | #### Tabs 132 | 133 | ::: tabs#fruit 134 | 135 | @tab apple 136 | 137 | Apple 138 | 139 | @tab banana 140 | 141 | Banana 142 | 143 | @tab orange 144 | 145 | Orange 146 | 147 | ::: 148 | 149 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/tabs.html) 150 | 151 | #### Code Tabs 152 | 153 | ::: code-tabs#shell 154 | 155 | @tab pnpm 156 | 157 | ```bash 158 | pnpm add -D vuepress-theme-hope 159 | ``` 160 | 161 | @tab yarn 162 | 163 | ```bash 164 | yarn add -D vuepress-theme-hope 165 | ``` 166 | 167 | @tab:active npm 168 | 169 | ```bash 170 | npm i -D vuepress-theme-hope 171 | ``` 172 | 173 | ::: 174 | 175 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/code-tabs.html) 176 | 177 | #### Superscript and Subscript 178 | 179 | 19^th^ H~2~O 180 | 181 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/sup-sub.html) 182 | 183 | #### Align 184 | 185 | ::: center 186 | 187 | I am center 188 | 189 | ::: 190 | 191 | ::: right 192 | 193 | I am right align 194 | 195 | ::: 196 | 197 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/align.html) 198 | 199 | #### Attrs 200 | 201 | A **word**{#word} having id. 202 | 203 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/attrs.html) 204 | 205 | #### Footnote 206 | 207 | This text has footnote[^first]. 208 | 209 | [^first]: This is footnote content 210 | 211 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/footnote.html) 212 | 213 | #### Mark 214 | 215 | You can mark ==important words== . 216 | 217 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/mark.html) 218 | 219 | #### Tasklist 220 | 221 | - [x] Plan A 222 | - [ ] Plan B 223 | 224 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/tasklist.html) 225 | 226 | #### Image Enhancement 227 | 228 | Support setting color scheme and size 229 | 230 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/image.html) 231 | 232 | #### Chart 233 | 234 | ::: chart A Scatter Chart 235 | 236 | ```json 237 | { 238 | "type": "scatter", 239 | "data": { 240 | "datasets": [ 241 | { 242 | "label": "Scatter Dataset", 243 | "data": [ 244 | { "x": -10, "y": 0 }, 245 | { "x": 0, "y": 10 }, 246 | { "x": 10, "y": 5 }, 247 | { "x": 0.5, "y": 5.5 } 248 | ], 249 | "backgroundColor": "rgb(255, 99, 132)" 250 | } 251 | ] 252 | }, 253 | "options": { 254 | "scales": { 255 | "x": { 256 | "type": "linear", 257 | "position": "bottom" 258 | } 259 | } 260 | } 261 | } 262 | ``` 263 | 264 | ::: 265 | 266 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/chart.html) 267 | 268 | #### Echarts 269 | 270 | ::: echarts A line chart 271 | 272 | ```json 273 | { 274 | "xAxis": { 275 | "type": "category", 276 | "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] 277 | }, 278 | "yAxis": { 279 | "type": "value" 280 | }, 281 | "series": [ 282 | { 283 | "data": [150, 230, 224, 218, 135, 147, 260], 284 | "type": "line" 285 | } 286 | ] 287 | } 288 | ``` 289 | 290 | ::: 291 | 292 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/echarts.html) 293 | 294 | #### Flowchart 295 | 296 | ```flow 297 | cond=>condition: Process? 298 | process=>operation: Process 299 | e=>end: End 300 | 301 | cond(yes)->process->e 302 | cond(no)->e 303 | ``` 304 | 305 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/flowchart.html) 306 | 307 | #### Mermaid 308 | 309 | ```mermaid 310 | flowchart TB 311 | c1-->a2 312 | subgraph one 313 | a1-->a2 314 | end 315 | subgraph two 316 | b1-->b2 317 | end 318 | subgraph three 319 | c1-->c2 320 | end 321 | one --> two 322 | three --> two 323 | two --> c2 324 | ``` 325 | 326 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/mermaid.html) 327 | 328 | #### Tex 329 | 330 | $$ 331 | \frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) 332 | = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\} 333 | $$ 334 | 335 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/tex.html) 336 | 337 | #### Include files 338 | 339 | @include(./README.md{11-17}) 340 | 341 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/include.html) 342 | 343 | #### Code Demo 344 | 345 | ::: normal-demo A normal demo 346 | 347 | ```html 348 |

VuePress Theme Hope

349 |

Is very powerful!

350 | ``` 351 | 352 | ```js 353 | document.querySelector("#very").addEventListener("click", () => { 354 | alert("Very powerful!"); 355 | }); 356 | ``` 357 | 358 | ```css 359 | span { 360 | color: red; 361 | } 362 | ``` 363 | 364 | ::: 365 | 366 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/demo.html) 367 | 368 | #### Stylize 369 | 370 | Donate Mr.Hope a cup of coffee. _Recommanded_ 371 | 372 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/stylize.html) 373 | 374 | #### Playground 375 | 376 | ::: playground#ts TS demo 377 | 378 | @file index.ts 379 | 380 | ```ts 381 | const msg = "hello world"; 382 | 383 | const speak = (msg: string) => console.log(msg); 384 | 385 | speak(msg); 386 | ``` 387 | 388 | ::: 389 | 390 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/playground.html) 391 | 392 | #### Vue Playground 393 | 394 | ::: vue-playground Vue Playground 395 | 396 | @file App.vue 397 | 398 | ```vue 399 | 404 | 405 | 409 | ``` 410 | 411 | ::: 412 | 413 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/vue-playground.html) 414 | 415 | #### Presentation 416 | 417 | @slidestart 418 | 419 | ## Slide 1 420 | 421 | A paragraph with some text and a [link](https://mrhope.site) 422 | 423 | --- 424 | 425 | ## Slide 2 426 | 427 | - Item 1 428 | - Item 2 429 | 430 | --- 431 | 432 | ## Slide 3.1 433 | 434 | ```js 435 | const a = 1; 436 | ``` 437 | 438 | -- 439 | 440 | ## Slide 3.2 441 | 442 | $$ 443 | J(\theta_0,\theta_1) = \sum_{i=0} 444 | $$ 445 | 446 | @slideend 447 | 448 | - [View Detail](https://vuepress-theme-hope.github.io/v2/guide/markdown/presentation.html) 449 | 450 | [md-enhance]: https://vuepress-theme-hope.github.io/v2/md-enhance/ 451 | -------------------------------------------------------------------------------- /docs/config/table.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 表格 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### printElementType 8 | 9 | ::: info 温馨提示 10 | 11 | ==printElementType== 是设计 provider 时的重要参数。比如说 `tid` 和 `field` 参数 12 | 13 | ::: 14 | 15 | | 名称 | 类型 | 说明 | 备注 | 16 | | -------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | 17 | | tid | `string` | 元素类型唯一标识 | | 18 | | title | `string` | `可拖拽元素中`显示的名称 | | 19 | | field | `string` | 字段名称
`同 options 的 field` | `优先级高于 options`
==无法彻底删除== | 20 | | data | `string` | 同==测试数据==但参数列表不会显示
`同 options 的 testData` ==需要先设置 field== | `优先级高于 options`
==无法彻底删除== | 21 | | ==columns== | `array` | 表格列 `二维数组` -> `[[{},{}],[{},{}]]`
==多行表头最下方的设置列 field==
`同 options 的 columns` | `优先级高于 options`
==无法彻底删除== | 22 | | formatter | `function` | 格式化函数
`同 options 的 formatter` | `优先级高于 options`
==无法彻底删除== | 23 | | styler | `function` | 样式函数
`同 options 的 styler` | `优先级高于 options`
==无法彻底删除== | 24 | | rowStyler | `function` | 行样式函数
`同 options 的 rowStyler` | `优先级高于 options`
==无法彻底删除== | 25 | | footerFormatter | `function` | 表格脚格式化函数,定义分组尾部显示信息,可以放置写统计信息。
`options`
`rows`
`data`
`currentPageGridRowsData`

`同 options 的 footerFormatter` | `优先级高于 footerFormatter`
==无法彻底删除== | 26 | | gridColumnsFooterFormatter | `function` | 多组表格脚格式化函数,定义分组尾部显示信息,可以放置写统计信息。
`options`
`rows`
`data`
`currentPageGridRowsData`

`同 options 的 gridColumnsFooterFormatter` | `优先级高于 options`
==无法彻底删除== | 27 | | groupFields | `array` | 数据的`分组字段`,该字段为数组,可以根据多列进行分组。
如:`['name']` | ==参数列表中没有编辑项==

==无法彻底删除== | 28 | | groupFormatter | `function` | 分组头格式化函数,定义分组显示信息,当 groupFields 数组长度为 1 是默认显示为字段值。
`groupData:分组信息。`
`options:打印元素的选项值。`

如:`function(group,option) {return "这里自定义统计脚信息";}` | ==参数列表中没有编辑项==

==无法彻底删除== | 29 | | groupFooterFormatter | `function` | 分组脚格式化函数,定义分组尾部显示信息,可以放置写统计信息。
`groupData:分组信息。`
`options:打印元素的选项值。`
| ==参数列表中没有编辑项==

==无法彻底删除== | 30 | | onRendered | `function` | 渲染完成回调
==只能放在 printElementType 中== | ==设计时不会触发== | 31 | 32 | ### columns 33 | 34 | ::: info 温馨提示 35 | 36 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 37 | 38 | ::: 39 | 40 | | 名称 | 类型 | 说明 | 备注 | 41 | | --------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | 42 | | width | `number` | 列宽 `可拖拽调整` | ==宽度只是相对值 实际渲染会等比换算== | 43 | | title | `string` | 列标题 `姓名#name` | ==`#`后面是字段名 field == | 44 | | field | `string` | 列字段名
`设置 fields 可下拉选择` | ==可在标题中编辑== | 45 | | fixed | `boolean` | 列宽度锁定
`渲染时不进行等比换算` | | 46 | | rowspan | `number` | 行合并
`同 html table td` | | 47 | | colspan | `number` | 列合并
`同 html table td` | | 48 | | align | `string` | 左右对齐方式
`left、right、center` | | 49 | | halign | `string` | ==表头==左右对齐方式
`left、right、center` | | 50 | | formatter2 | `function` | 单元格的格式化函数
`value:字段的值`
`row:行的记录数据`
`index:行的索引`
`options:打印元素的选项值` | 返回==文本/html== | 51 | | renderFormatter | `function` | 单元格的渲染函
`value:字段的值`
`row:行的记录数据`
`index:行的索引`
`options:打印元素的选项值`数 | 返回==文本/html==

`当时SB了,现在发现和 formatter 功能一样` | 52 | | styler2 | `function` | 单元格的样式函
`value:字段的值`
`row:行的记录数据`
`index:行的索引`
`options:打印元素的选项值`数 | 返回==jQuery.css()可处理对象==
如: `{color:'red'}` | 53 | | stylerHeader | `function` | 表格头样式函数
`options:打印元素的选项值`数 | 返回==jQuery.css()可处理对象==
如: `{color:'red'}` | 54 | | tableTextType | `string` | 单元格字段类型
`text、barcode、image、qrcode、sequence、`
对应为:`文本、条形码、图片、二维码、序号` | | 55 | | tableColumnHeight | `string` | 特定单元格高度 ==二维码、条形码、图片才有效== | 改变单元格高度,请设置 ==`options`的表体行高:tableBodyRowHeight== | 56 | | tableSummary | `string` | 底部聚合函数
`count:计数`
`sum:合计`
`avg:平均值`
`max:最大值`
`min:最小值` | 57 | | tableSummaryTitle | `string` | 底部聚合函数标题 `'true','false'` `显示或隐藏` | | 58 | | tableSummaryText | `string` | 底部聚合函数标题==自定义聚合函数前面的文本== | | 59 | | tableSummaryAlign | `string` | 底部聚合函数对齐方式 `left、right、center` | | 60 | | tableSummaryNumFormat | `number` | 底部聚合函数==保留小数位==
`默认 2` | | 61 | | upperCase | `string` | 转大写
如:`7` 就会把 ==`10.8` 转换成 `壹拾元捌角零分`== | | 62 | 63 | ### options 64 | 65 | ::: info 温馨提示 66 | 67 | 参数过多,可能没有罗列完整。更多参数点击元素后,在==参数面板==中查看。
`如果你是开发者,我相信你知道该怎么看`。 68 | 69 | ::: 70 | 71 | | 名称 | 类型 | 说明 | 备注 | 72 | | ----------- | -------- | ------------------------------- | ----------------------------------------- | 73 | | field | `string` | 字段名称 | 可配置==tableFields==让字段名变成下列选择 | 74 | | fields | `array` | ==列==字段名列表 | `[{"text":'姓名',"field":'name'}]` | 75 | | tableFields | `array` | ==表格==字段名列表 | `[{"text":'姓名',"field":'name'}]` | 76 | | fontFamily | `string` | 字体 `默认可继承面板设置的字体` | 默认`宋体` | 77 | | fontSize | `string` | 字体大小 | 默认`9pt` | 78 | -------------------------------------------------------------------------------- /docs/config/template.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 模板 3 | category: 4 | - 模板&元素 5 | --- 6 | 7 | ### 模板对象 8 | 9 | 模板核心对象。创建它的实例,以实现`浏览器打印`,`直接打印/绕过浏览器弹窗打印`([直接打印机客户端](https://gitee.com/CcSimple/electron-hiprint)),`“打印设计”`,`“打印预览”`和`“导出PDF”`的功能 10 | 11 | ```js 12 | // 新建模板 参数见下方表格 13 | let hiprintTemplate = new hiprint.PrintTemplate(options); 14 | // 将模板设计到指定容器中 15 | // '#hiprint-printTemplate' ==> jQuery('#hiprint-printTemplate') ==> $('#hiprint-printTemplate') 16 | hiprintTemplate.design("#hiprint-printTemplate"); 17 | // 打印数据,仅 “打印预览/浏览器打印/直接打印/导出PDF 时才会处理。 18 | // 其中 “text” 是一个元素的 “字段名(field)” 19 | let printData = { text: "这是打印时显示的文本" }; 20 | // 打印预览 --> 返回实际打印的 html 内容 21 | hiprintTemplate.getHtml(printData); 22 | // 浏览器打印 --> 需要用户 手动 点击打印按钮 !!! “无法监听“ 用户是否点了打印 23 | hiprintTemplate.print(printData); 24 | // 浏览器批量打印 --> 生成的 html 页面越多 越容易造成浏览器卡死 25 | // 打印3份 26 | hiprintTemplate.print([printData1 printData2, printData3]); 27 | 28 | // 直接打印 --> 有回调是否将“打印任务” “发生成功” 给打印机 29 | hiprintTemplate.print2(printData, { printer: "打印机名称", title: "打印任务名称" }); 30 | // 直接批量打印 --> 同 print 批量打印 页面越多 越容易造成浏览器卡死 31 | // 直接打印3份 32 | hiprintTemplate.print2([printData1 printData2, printData3]); 33 | 34 | // 导出PDF 35 | hiprintTemplate.toPdf(printData, "pdf名称"); 36 | // 批量导出PDF --> 同 print 批量打印 页面越多 越容易造成浏览器卡死 37 | // 导出3份 38 | hiprintTemplate.toPdf([printData1 printData2, printData3], "pdf名称"); 39 | ``` 40 | 41 | ### 自定义设计使用示例 42 | 43 | ::: tip 注意 44 | 45 | 这里是使用 [核心包 @sv-print/hiprint](https://www.npmjs.com/package/@sv-print/hiprint) 的示例。是没有组件的方式。适用于想自定义 UI 的开发者。 46 | 47 | ::: 48 | 49 | ```vue 50 | 68 | 69 | 125 | ``` 126 | 127 | ### 模板参数 128 | 129 | | 名称 | 类型 | 说明 | 备注 | 130 | | ------------------- | ------------------ | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | 131 | | template | `json` | 模板 json 数据 | | 132 | | settingContainer | `string` | 设置项对应的 html 容器 | 如: `
` | 133 | | paginationContainer | `string` | 多面板容器(需要在页面添加对应 div ) | 如: `
` | 134 | | fields | `array` | fields 存在 元素字段则显示为下拉框显示
fields 不存在 元素字段则为输入框显示 | `此处设置为全局设置元素字段数据源,优先级低于 元素类型设置数据源` | 135 | | onImageChooseClick | `(target)=>{}` ) | 图片地址选择回调 | `target.refresh(url,options)`
`target.getValue()` | 136 | | fontList | `array` | 自定义下列选择的 字体列表 | `hiprintTemplate.setFontList([])`
或元素中设置
`options.fontList: []` | 137 | | dataMode | `number` | onDataChanged 返回 json 格式 1:getJson 其他:getJsonTid 默认 1 | | 138 | | onDataChanged | `(type, json)=>{}` | 模板发生改变时回调, 有些修改可能没有回调 | 新增、移动、删除、修改(参数调整)、大小、旋转等等 | 139 | | onUpdateError | `(e)=>{}` | hiprintTemplate.update(json) 更新失败时回调 | 撤销重做使用的就是 update | 140 | 141 | ### 常用 Api 142 | 143 | | API | 参数 | 说明 | 返回值 | 备注 | 144 | | -------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | ----------------------------------------------------------------------------------------------------------- | 145 | | getJson | `无` | 返回 ==非配置版== 模板 json | `json` | 参数较完整 | 146 | | getJsonTid | `无` | 返回 ==配置版== `(把一些参数存在 provider 中,所以需要先 init 对应 provider)` 模板 json | `json` | 参数较少 | 147 | | clear | `无` | 清空模板 | `无` | | 148 | | rotatePaper | `无` | 旋转纸张 -> `宽 => 高;高 => 宽` | `无` | | 149 | | getOrient | `无` | 获取纸张方向 | `1`--纵向
`2`--横向 | | 150 | | setPaper | `width,height` | 设置模板纸张大小
`setPaper(210,297)`
内置纸张大小 ==只有 A1-A8 和 B1-B8==
`setPaper('A4')` | | | 151 | | zoom | `scaleValue,save` | 缩放设计纸张
`zoom(1.2)`
缩放并保存(==打印时也会缩放==)
`zoom(1.2,true)` | | | 152 | | design | `string, {grid:boolean}` | 将模板渲染到指定容器中进行拖拽设计
`design("#hiprint-printTemplate")`
`{grid:true}`显示网格 | `无` | ==调用之前需要能够获取到对应 DOM 容器== | 153 | | update | `json` | 根据 json 模板更新
`update(json)` | `无` | ==可能更新失败==可查看控制台 log | 154 | | setElsAlign | `string` | 设置多选元素 左对齐
`setElsAlign('left')` | `无` | `left/vertical/right/top/horizontal/bottom/distributeHor/distributeVer` | 155 | | setElsSpace | `number,isHor` | 设置多选元素 垂直间距 10
`setElsSpace(10)`
水平间距 10
`setElsSpace(10,true)` | `无` | | 156 | | updateOption | `key,value` | 设置多选元素的 字体大小 12
`updateOption('fontSize',12)`
字体加粗
`updateOption('fontWeight', 'bolder');` | `无` | 支持的参数在控制台输入 `window.HIPRINT_CONFIG` 查看
如: `window.HIPRINT_CONFIG.text.tabs[0].options` | 157 | | getHtml | `data,options,callback` | 获取打印 html
`getHtml({})`
批量获取打印 html
`getHtml([{},{}])`
定义打印左上偏移量
`getHtml(data,{leftOffset:-1,topOffset:-1 })`==将覆盖面板偏移设置==
| `html` | `paperNumberToggleInEven`

`leftOffset`

`topOffset` | 158 | | print | `data,options` | 浏览器打印
`print({})`
批量打印
`print([{},{},{},{}])`
定义打印左上偏移量
`print({},{leftOffset:-1,topOffset:-1 })`==将覆盖面板偏移设置==
浏览器打印回调
`print({},{},{callback:()=>{console.log('浏览器打印窗口已打开')}})` | `无` | `paperNumberToggleInEven`

`leftOffset`

`topOffset` | 159 | | print2 | `data,options` | 直接打印
`print2({})`
批量打印
`print2([{},{},{},{}])`
定义打印左上偏移量
`print2({},{leftOffset:-1,topOffset:-1 })`==将覆盖面板偏移设置==
| `无` | `paperNumberToggleInEven`

`leftOffset`

`topOffset` | 160 | | on | `eventName,callback` | ==直接打印==回调
打印成功
`on('printSuccess', function (data) { })`
打印失败
`on('printError', function (data) { })` | `无` | | 161 | | toImage | `data,options` | 导出 图片 ==仅 sv-print 支持==
`toImage({},{name:'download.jpg',isDowload:true})`
定义打印左上偏移量
`toImage({},{leftOffset:-1,topOffset:-1 })`==将覆盖面板偏移设置==
| `$.Deferred()` | `type: 'image/jpeg'`
`quality: '0.8'`
`toType: 'url'/'blob'`
`isDownload:true` | 162 | | toPdf | `data,fileName,options` | 导出 pdf
`toPdf({},"测试导出")`
导出参数==scale 越大 pdf 越清晰,文件越大 性能越差 默认 2==
`toPdf({},"测试导出",{scale:4})`
定义打印左上偏移量
`toPdf({},"",{leftOffset:-1,topOffset:-1 })`==将覆盖面板偏移设置==
| `$.Deferred()` | `scale`

`isDownload` | 163 | | getPrinterList | `无` | 返回 连接 ==打印客户端== 时获取到的打印机列表 | `array` | 刷新获取打印机列表
==这是异步的,需要已连接打印客户端==
`hiprint.refreshPrinterList((list) => {})` | 164 | | setFields | `array` | 设置字段列表
`setFields([{field:'name',text:'名称'}])` | `无` | ==此处设置为全局设置元素字段数据源,优先级低于 元素类型设置数据源== | 165 | | setFontList | `array` | 设置可选字体列表
`setFontList([{value:'SourceHanSansCN-Normal',title:'思源黑体'}])` | `无` | ==需要本机已安装该字体== | 166 | 167 | ### 其他 Api 168 | 169 | | API | 参数 | 说明 | 返回值 | 备注 | 170 | | ---------------- | ------------------------ | -------------------------------------------------------------------------------------------- | --------- | ----------------------------------------- | 171 | | undo | `无` | 撤销 | `无` | 172 | | redo | `无` | 重做 | `无` | 173 | | copyJson | `无` | 复制元素 | `[元素]` | ==仅 sv-print 支持== | 174 | | cutJson | `无` | 剪切元素 | `无` | ==仅 sv-print 支持== | 175 | | canPaste | `无` | 能否粘贴 | `boolean` | ==仅 sv-print 支持== | 176 | | getPrintStyle | `index` | 获取打印打印样式
`panels`对应下标, 默认 0 | `string` | 查看打印样式是否正常`纸张大小`,`纸张方向` | 177 | | getPaperType | `index` | 获取打印纸张类型
`panels`对应下标, 默认 0 | `string` | | 178 | | addPrintPanel | `options` | 新增面板
`addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 })` | `panel` | 多面板操作 | 179 | | printByHtml | `html` | 打印 html
`printByHtml($('#Id').html())` | `无` | | 180 | | printByHtml2 | `html` | 直接打印 html
`printByHtml2($('#Id').html())` | `无` | | 181 | | getElementByName | `elementName,panelIndex` | 获取元素 `options.name == 'testName'` 的打印组件
`getElementByName(testName)` | `array` | ==panelIndex==多面板的下标 默认 0 | 182 | --------------------------------------------------------------------------------