史诗级更新！sv-print虽然不是很强，但却是很能打的设计器组件

哈喽哇！我是小不，不简说的不。在代码世界疯狂蹦跶的 "非资深选手"🙋‍♂️！主打一个*"踩坑我来，避坑你学"*。毕竟独乐乐不如众乐乐，让大家少走弯路，才是咱的终极使命✨～

sv-print 可视化打印设计器迎来重大更新！适配移动端啦~ 虽然功能不是很完美，但是确实很能打！

移动端可能不存在设计打印模板的情况，但是~ 有这功能和不用是两回事☺️

更多使用文档，可访问网站www.ibujian.cn/svp查看。

更新日志：

🌈 调整优化支持触摸事件 & 适配移动端UI

🌈 新增支持 touchZoom 方法,以适配移动端预览双指缩放

js 复制代码

const box = globalThis.$("#preview_content .hiprint-printPaper");
const ww = window.innerWidth - 64; // 64: 边距
const tw = box.width();
const zoom = Math.round((ww / tw) * 100) / 100;
box.css({
  transform: `scale(${zoom})`,
  "transform-origin": "0px 0px",
});
globalThis.$(box).touchZoom({
  minScale: 0.2,
  maxScale: 6.0,
  transform: true, // 启用 transform 缩放
});

🌈 新增支持 ${paperNo} ${paperCount} 和 ${field} 值替换

🌈 新增支持 addPrintElementToPaperByTid 根据 tid 添加元素

js 复制代码

printTemplate?.addPrintElementToPaperByTid("defaultModule.text");
// 添加到指定位置 pt
const left = 10;
const top = 30;
printTemplate?.addPrintElementToPaperByTid("defaultModule.text", left,top);

🌈 新增支持 providerMap 支持传自定义渲染函数

js 复制代码

const providerMap = ref({
    container: '.hiprintEpContainer',
    value: 'defaultModule',
    render: (list) => {
      let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
      // xxx
      return container;
    },
});

hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'defaultModule', (list) => {
  let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
  list.forEach(function (item) {
    const box = globalThis.$(`
          <div class="draggable-ele-group">
            <span class="title">${item.name}</span>
            <div class="list"></div>
          </div>
          `);
    const typeList = box.find('.list');
    item.printElementTypes.forEach(function (t) {
      typeList.append(`
              <div class="draggable-ele ep-draggable-item" tid=${t.tid}>
                <i class="svicon sv-base sv-${t.type}"></i>
                <p style="white-space:nowrap">${t.getText()}</p>
              </div>
          `);
    });
    container.append(box);
  });
  return container;
});

🌈 调整优化 setElsAlign 支持对齐纸张;单项默认对齐纸张, 多选按住 ctrl/command 键可批量对齐

js 复制代码

printTemplate?.setElsAlign("left", true);
printTemplate?.setElsAlign("right", true);

🌈 调整优化锁定元素禁止调整大小 & 全局配置 disableNoDraggableSize 默认 true

js 复制代码

hiprint.setConfig({
  disableNoDraggableSize: false, // 锁定元素,可编辑属性 宽高大小
})

🌈 调整新增 buildPagination 构建多面板菜单

js 复制代码

// 手动构建多面板菜单
printTemplate.buildPagination("#printPanels");

✨ 优化导出PDF,导出图片部分元素清晰度 & 导出图片支持 quality: 0~1

✨ 优化双击编辑功能(可编辑为html)

✨ 优化删除元素逻辑(锁定元素,全选元素) & 右键菜单删除情况

✨ 优化预览支持设置是否隐藏导出图片,导出PDF以及直接打印按钮

✨ 优化全选时触发元素选中事件

✨ 优化 designer 组件传 template 为模板对象时,默认事件处理

✨ fix setConfig 方法可能导致 tab 显示错误问题