拖拽元素介绍
约 823 字大约 3 分钟
...
2025-11-04
作用
可拖拽元素由 "provider" 提供. 就是提供默认【新拖拽】出来元素的默认大小、参数及样式。
注意
模板中 面板的宽高单位是mm, 元素和其他参数的的单位是pt.
默认内置的元素只有
- 文本(text) (可设置参数,渲染为二维码,条形码)
- 图片(image)
- 长文本(longText) (内容超过面板高度时,会自动分页)
- 表格(table) (内容超过面板高度时,会自动分页)
- html(html)
- 横线(hline)
- 竖线(vline)
- 矩形(rect)
- 椭圆(oval)
如果需要扩展更多的元素, 可以参考插件机制（在新窗口打开）
引入插件后,会自动插入默认 provider 中.
可通过 hiprint.ElementTypes.allElementTypes 查看所有元素类型.
查看支持的元素类型
开发者控制台输入.js
const allTypes = new Set(hiprint.ElementTypes.allElementTypes.map((e) => e.type));
console.log(allTypes);示例代码
testProvider.js
import { hiprint } from 'sv-print';
// 或 import { hiprint } from "@sv-print/hiprint"
export default function (options) {
// 注意: 这里的 context 是 内部回调的.
// 上面的 options 才是我们自己 传的 参数
var addElementTypes = function (context) {
// 移除 旧的 testModule "元素"类型, 以避免重复
context.removePrintElementTypes('testModule');
// 添加 testModule "元素"类型
context.addPrintElementTypes('testModule', [
// PrintElementTypeGroup 分组 可添加多个
new hiprint.PrintElementTypeGroup('常规', [
{
tid: 'testModule.text', // 唯一 key
type: 'text', // 元素类型
title: '文本', // 这里和 options 中的 title 一样。"拖拽时就显示" 优先级高于 options 的, "无法彻底删除"
// field: 'text' // 这里和 options 中的 field 一样。优先级高于 options 的, "无法彻底删除"
// data: "1111", // 这里和 options 中的 testData 一样。会有冲突, "无法彻底删除"
options: {
title: options.title || '文本2', // 标题, "拖进设计器才会显示"
field: 'text', // 字段名称
testData: '123', // 测试数据
},
},
]),
// 辅助元素分组, 可添加多个
new hiprint.PrintElementTypeGroup('辅助', [
{
tid: 'testModule.hline',
title: '横线',
type: 'hline',
},
]),
]);
};
return {
addElementTypes: addElementTypes,
};
}导入导出与添加.js
// 导出
const json = hiprint.ElementTypes.getProviderJson();
// 清空
hiprint.ElementTypes.clearProvider();
// 导入（会先清空）
hiprint.ElementTypes.setProviderJson(json);
// 追加（不清空）
hiprint.ElementTypes.addProviderJson([
{
name: 'defaultModule',
list: [
{
name: '测试',
printElementTypes: [{ title: '横线1', tid: 'defaultModule.hline1', type: 'hline' }],
},
],
},
]);
// 往 defaultModule 下 "分组名称" 分组的第 1 个位置插入一个文本元素
hiprint.ElementTypes.insertPrintElementType(
{
title: '测试文本',
tid: 'defaultModule.ttt',
options: { title: '测试文本1' },
type: 'text',
},
'defaultModule',
'分组名称',
1,
);温馨提示
上面代码中: testModule 是自定义的名称, 但是要保证 唯一. 元素的 tid 也是自定义的, 但是要保证 唯一. 所以推荐使用 testModule.text 这种格式. 以避免冲突.
版权所有
版权归属：sv-print