史诗级更新!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 显示错误问题

相关推荐
慧一居士20 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead22 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app